用面向对象写轮播图

运行效果图

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