배너2
jQuery 2014. 5. 15. 21:49<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>study-banner1</title>
<style type="text/css">
body, ul, li {margin:0; padding:0;}
ul {list-style: none; padding:30px; background:#FFFF00; text-align:center; height:202px;}
ul li img {display:none; position:absolute; left:50%; top:30px; margin-left:-155px; width:309px; height:202px;}
ul li.on img {display:block;}
ul li { display:inline-block; padding-top:180px}
ul li a {display:block; position:relative; z-index:1; height:15px; width:15px; border:1px red solid; background:#fff;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
var color = ["red","yellow","green"];
//var colorNum = color.length;
var liMenu = $("#banner>li").length;
var menu = $("#banner>li").index();
var timeRun = setInterval(count,2000);
$("#banner>li").hover(function(){
clearInterval(timeRun);
},function(){
timeRun = setInterval(count,2000);
//setInterval(count,2000);
});
$("#banner>li>a").hover(function(){
var menu = $(this).parent('li').index();
/*$('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
opacity:1
}).siblings('li').removeClass('on').parent('ul')
.css('background',color[menu]);*/
move(menu);
});
function move(arg){
$('#banner>li:eq('+arg+')').addClass('on').css('opacity','0').animate({
opacity:1
}).siblings('li').removeClass('on').parent('ul')
.css('background',color[arg]);
}
function count(){
menu +=1;
move();
/*
$('#banner>li:eq('+menu+')').addClass('on').css('opacity','0').animate({
opacity:1
}).siblings('li').removeClass('on').parent('ul')
.css('background',color[menu]);
*/
if(menu == liMenu){
menu = -1; //위에서 한번 더하기 때문에 0이 아닌 -1을 해준다
}
}
/*
function test (x) {
z = x+y;
}
alert(test (1,3));
*/
});
</script>
</head>
<body>
<ul id="banner">
<li class="on"><a href="#a" title="이벤트1">1</a>
<img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban__taiwan_140429.jpg" alt="" />
</li>
<li><a href="#a" title="이벤트2">2</a>
<img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_aus_140430.jpg" alt="" />
</li>
<li><a href="#a" title="이벤트3">3</a>
<img src="http://cdn.ybtour.co.kr/Images/main/main_banner/hban_140421.jpg" alt="" />
</li>
</ul>
</body>
</html>
'jQuery' 카테고리의 다른 글
| jquery 플러그인 (0) | 2015.07.14 |
|---|---|
| 0527 duration (0) | 2014.05.27 |
| 이미지 배너 (0) | 2014.05.13 |
| div 안에 있는 엘리먼트 합 구하기 (0) | 2013.02.03 |
| 신현석님 Jquery AIP 정리 (1) | 2012.08.29 |