banner渐隐渐现

来源：互联网发布：win8.1 固态硬盘优化编辑：程序博客网时间：2024/05/22 07: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">
<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;width:100%;overflow:hidden;}
.banner .banlist li{position:absolute;top:0;left:0;z-index:1;opacity:1;}
.banner .banlist li.zindex{z-index:0;opacity:0;/*重要*/}
.banner .banlist li img{width:100%;height:500px;}
.navlist{display:table;margin:0 auto;margin-top:-30px;z-index:2;position:relative;}
.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 class="zindex"><img src="images/banner02.png"></li>
<li class="zindex"><img src="images/banner01.png"></li>
</ul>
<ul class="navlist"></ul>
</div>
<script>
$(function(){
var len = $('.banner > .banlist > li').length;//li的数量
var win = $(window).width();//屏幕宽度
var index=0;//属于哪一个
$('.banner').css({width:win});
$('.banner > .banlist > li').css({width:win});

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

$('.navlist li').hover(function(){
index = $(this).index();
showbanner(index);
});
//自动播放
timer = setInterval(function(){
if(index<len-1){
index++;
showbanner(index);
}else{
index=0;
showbanner(index);
}
},3000);
//放上停止播放，离开自动播放
$('.navlist,.banlist').hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
if(index<len-1){
index++;
showbanner(index);
}else{
index=0;
showbanner(index);
}
},3000);
});
//播放函数stop()防止频繁动画
function showbanner(index){
$('.banner > .banlist').find('li:eq('+ index +')').stop().animate({opacity:1},500).css({"z-index":"1"}).siblings().stop().animate({opacity:0},500).css({'z-index':"0"});
$('.navlist li').eq(index).addClass('current').siblings().removeClass('current');
}

})
</script>
</body>
</html>

0 0