您的位置：首页 > Web前端 > JQuery

宽屏banner切换jquery

2016-08-27 15:09 260 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： banner 切换 jquery

相关文章推荐

新的分享

章节导航