宽屏banner切换jquery

来源：互联网发布：郁可唯独家记忆知乎编辑：程序博客网时间：2024/05/22 13:38

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
div,ul,li,p,form{list-style-type: none;}
body{font-size:12px;color:#666;max-width: 100%;background:#eee;font-family: "Microsoft YaHei";}

.banner{position:relative;width:100%;height:500px; overflow:hidden;}
.banner .banlist{display:table;height:500px;}
.banner .banlist li{float:left;}
.banner .banlist li img{width:100%;}
.navlist{display:table;margin:0 auto;margin-top:-30px;z-index:2;}
.navlist li{float:left;width:10px;height:10px; border-radius:50%;margin-right:10px;background:#ccc;}
.navlist li:last-child{margin-right:0;}
.navlist li.current{background-color:#39F;}
</style>
</head>

<body>
<div class="banner">
<ul class="banlist">
<li><img src="images/banner01.png"></li>
<li><img src="images/banner01.png"></li>
</ul>
<ul class="navlist"></ul>
</div>
<script>
$(function(){
var len = $('.banner > .banlist > li').length;
var win = $(window).width();
var index=0;
$('.banner').css({width:win});
$('.banner > .banlist > li').css({width:win});
$('.banner > .banlist').css({width:win*len});

for(var i=0;i<len;i++){
$('.navlist').append($("<li></li>"));
}
$('.navlist li:eq(0)').addClass('current');

$('.navlist li').hover(function(){
index=$(this).index();
goto(index);
});

timer = setInterval(function(){
if(index < len-1){
index++;
goto(index);
}else{
index=0;
goto(index);
}
},3000);

$('.navlist,.banlist').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
if(index < len-1){
index++;
goto(index);
}else{
index=0;
goto(index);
}
},3000);
});
function goto(index){
$('.banner .banlist').stop().animate({marginLeft:-index*win},500);
$('.navlist').find('li:eq('+ index +')').addClass('current').siblings().removeClass('current');
}
})
</script>
</body>
</html>

0 0