运行效果图
html代码
<div id="banner">
<ul>
<li><img src="images/lbt1.jpg"></li>
<li><img src="images/lbt2.jpg"/></li>
<li><img src="images/lbt3.jpg"/></li>
</ul>
<div id="direction">
<a href="##"><</a>
<a href="##">></a>
</div>
<div id="btn">
<a href="##" class="active">1</a>
<a href="##">2</a>
<a href="##">3</a>
</div>
</div>
css代码
*{
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
font-size:12px;
color: #333333;
text-decoration: none;
}
#banner{
width:1211px;
height: 400px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
#banner>ul>li{
float: left;
position: absolute;
opacity: 0;
}
#banner>ul>li:nth-of-type(1){
opacity: 1;
}
#banner>ul>li>img{
width:1435px;
height: 400px;
cursor: pointer;
}
#direction{
display: none;
position: relative;
}
#direction>a{
position: absolute;
width:40px;
height:40px;
font-size: 20px;
text-align: center;
line-height:40px;
color: #fff;
text-decoration: none;
background: #000;
top:160px;
opacity: 0.5;
border-radius:50px 60px;
}
#direction>a:hover{
opacity: 1;
}
#direction>a:nth-child(2){
right: 0;
}
#direction>a:nth-child(1){
left: 40px;
}
#btn{
position: absolute;
left:50%;
bottom:0;
}
#btn>a{
float: left;
width:25px;
height: 25px;
line-height: 25px;
text-align: center;
background: #444444;
color: #FFFFFF;
border-radius: 50%;
margin:5px;
}
#btn>.active{
background:#669933;
}
JS代码
/*把属性写在构造函数里*/
function Banner(ele){
this.aLi = ele.find("li");
this.next = 0;
this.iNow = 0;
this.dir1 = $("#direction>a").first();
this.dir2 = $("#direction>a").last();
this.banner = $("#banner");
this.direction = $("#direction");
this.timer = null;
this.aBtn = $("#btn>a");
this.index = null;
this.init();
}
/*对jquery对象扩展方法,把方法添加到原型对象上*/
$.extend(Banner.prototype,{
// 初始化
init:function(){
this.autoplay();
this.indicator();
this.dir1.on("click",$.proxy(this.dire,this));
this.dir2.on("click",$.proxy(this.handleAuto,this));
this.banner.on("mouseover",$.proxy(this.stopPlay,this));
this.banner.on("mouseout",$.proxy(this.continuePlay,this));
},
//点击右边的按钮及自动播放
handleAuto:function(){
if(this.next>=this.aLi.length-1){
this.next = 0;
}else{
this.next ++;
}
this.toImg();
},
//点击左边的按钮
dire:function () {
if (this.next == 0) {
this.next =this.aLi.length - 1;
} else {
this.next--;
}
this.toImg();
},
// 指示器
indicator:function(){
this.aBtn.each($.proxy(this.handleIndicatorEach,this))
},
handleIndicatorEach:function(index,val){
this.aBtn.eq(index).on("mouseover",index,$.proxy(this.dicator,this))
},
dicator:function(e){
// 保存当前下标
this.index = e.data;
this.aBtn.eq(this.index).addClass("active").siblings().removeClass();
//移入的时候让当前这个li显示
this.aLi.eq(this.index).fadeTo(500,1).siblings().fadeTo(500,0);
// 因为next与this.index不是同一个东西 因此需要他们两个同步
this.next = this.index;
},
//移入的时候轮播停止
stopPlay:function(){
clearInterval(this.timer);
this.direction.attr("style","display:block");
},
//移出的时候轮播继续
continuePlay:function(){
this.autoplay();
this.direction.attr("style","display:none");
},
//自动轮播
autoplay:function(){
this.timer = setInterval($.proxy(this.handleAuto,this),3000)
},
//运动原理
toImg:function(){
this.aLi.eq(this.iNow).fadeTo(500,0);
this.aLi.eq(this.next).fadeTo(500,1);
this.iNow = this.next;
$(this.aBtn[this.next]).addClass("active").siblings().removeClass();
}
})
new Banner($("#banner"));