面向对象写轮播图

运行效果图

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"));