상세 컨텐츠

본문 제목

교과서재단 TIOS 메인 롤링배너

Front-End/JavaScript

by Array 2012. 11. 14. 12:06

본문

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

<head>

<!-- html_head -->

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="author" content="한국교과서연구재단 통합관리시스템" />

<meta name="keywords" content="한국교과서연구재단 통합관리시스템, 한국교과서연구재단 " />

<meta name="description" content="롤링배너" />

<title>배너테스트</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<link rel="stylesheet" href="default.css" type="text/css" />

<!-- //html_head -->

</head>

<body>

<div class="event_banner">

<div id="banners">

<div class="banner current" style="display:block;">

<a href="#" >

<img src="" alt="img" width="100" height="100" />

</a>

</div>

<div class="banner">

<a href="#" >

<img src="" alt="img2" width="100" height="100" />

</a>

</div>

<div class="banner">

<a href="#" >

<img src="" alt="img3" width="100" height="100" />

</a>

</div>

<ul id="controls">

<li class="prev" rel="bn1"><a href="#">이전</a></li>

<li rel="bn2" class="stop" ><a href="#">정지</a></li>

<li rel="bn3" class="next"><a href="#">다음</a></li>

</ul>

</div>

</div>

<script type="text/javascript">

//<![CDATA[

var load = true;

$(document).ready(function(){

$("#banners div a").mouseover(function(){ load = false});

$("#banners div a").mouseout(function(){ load = true});

$("#controls li.prev").click(function(){

load = false;

var prev = $('.banner.current').prev('.banner').length ? $('.banner.current').prev('.banner') : $('#banners .banner:last');

$(".current").fadeOut(0).removeClass("current");

$(prev).show();

$(prev).addClass("current");

return false;

});


$("#controls li.next").click(function(){

load = false;

var next = $('.banner.current').next('.banner').length ? $('.banner.current').next('.banner') : $('#banners .banner:first');

$(".current").fadeOut(0).removeClass("current");

$(next).show();

$(next).addClass("current");

return false;

});

$("#controls li.stop").click(function(){

if(load == false){

load = true;

}else if(load == true){

load = false;

}

});

$("#controls li.prev").mouseout(function(){ load = true; });

$("#controls li.next").mouseout(function(){ load = true; });

});


function banner_switch(){

if(load == false) return;

var next = $('.banner.current').next('.banner').length ? $('.banner.current').next('.banner') : $('#banners .banner:first');


$(".current").fadeOut(0).removeClass("current");

$(next).show();

$(next).addClass("current");


}


$(function(){

slide = setInterval("banner_switch()",500);

});


function set_new_interval(interval){

clearInterval(slide);

slide = setInterval("banner_switch()",interval);

}

//]]>

</script>

</body>

</html>

'Front-End > JavaScript' 카테고리의 다른 글

[Javascript] ES6 입문하기- Arrows(화살표함수) 편  (0) 2019.08.30

관련글 더보기

댓글 영역

티스토리툴바