<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0}
ul,li{list-style: none}
#banner{width:800px;height: 400px;overflow: hidden;margin:40px auto;position: relative;}
#banner>ul>li{opacity: 0;position: absolute}
#banner>ul>li:first-child{opacity: 1;z-index: 10}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="https://pic.kuaizhan.com/g3/22/0b/4bea-7962-4826-9500-206a3854fc4133/imageView/v1/thumbnail/640x0" alt=""></li>
<li><img src="https://pic.kuaizhan.com/g3/7a/14/c501-c458-4f9d-84d9-69c6e4f294d204/imageView/v1/thumbnail/640x0" alt=""></li>
<li><img src="https://pic.kuaizhan.com/g3/c7/06/7422-de98-43dd-b4fc-4dac60c6adb403/imageView/v1/thumbnail/640x0" alt=""></li>
<li><img src="https://pic.kuaizhan.com/g3/04/cd/743b-e472-4451-a787-261861174a5634/imageView/v1/thumbnail/640x0" alt=""></li>
</ul>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
$(function(){
var banner={
aLi:$("#banner>ul>li"),
shows:0,
hidd:0,
init:function(){
this.autoPlay();
},
autoPlay:function(){
setInterval($.proxy(this.handelAuto,this),2000);
},
toImg:function(){
this.aLi.eq(this.shows).fadeTo(1000,1);
this.aLi.eq(this.hidd).fadeTo(1000,0);
this.hidd=this.shows;
},
handelAuto:function(){
if(this.shows>=this.aLi.length-1){
this.shows=0;
}else{
this.shows++;
}
this.toImg();
}
}
banner.init();
})
</script>
网友评论