JavaScript面向对象编程实例：无缝轮播图的设计与实现

面向对象可以说是JavaScript中非常重要的知识，今天就用js面向对象的方法来实现一下无缝轮播图。

首先，我们先对无缝轮播图这个需求进行面向对象分析（OOA）：轮播图的实现可以大致分为这四个模块1.元素选择；2.事件绑定；3.动画效果；4.自动播放。

然后，就是要进行面向对象设计（OOD）：

function Banner(){
};
Banner.prototype = {
     constructor : Banner ,
     //初始化功能
     init : function(){
         //元素选择调用
         //调用事件绑定
         //调用自动播放
      },
      //元素选择
      elementSelector : function(){
      },
      //事件绑定
      bandEvent : function(){
      },
      //动画效果
      bannerAnimation : function(){
      },
      //自动播放
      autoPlay : function(){
      }
};

接下来的一步，也是最为重要的一步：面向对象编程（OOP）：

//初始化功能
init : function(){
    this.elementSelector();
    //将第一张图片复制一份放在末尾
    this.wapper_ele.appendChild(this.slides[0].cloneNode(true));
    //设置wapper的宽度，以便将所有图片都在一行内
    this.wapper_ele.style.width = this.slides[0].offsetWidth * this.slides.length + "px";
    this.index = 0 ;//轮播图下标
    this.bandEvent();//调用事件绑定
    this.autoPlay();//调用自动播放
}

//元素选择
elementSelector : function(){
    this.wapper_ele = document.querySelector(".wapper");
    this.slides = this.wapper_ele.children;
    this.left_btn_ele = document.querySelector(".left_btn");
    this.right_btn_ele = document.querySelector(".right_btn");
}

//元素绑定
bandEvent : function(){
    //下一张按钮
    this.right_btn_ele.addEventListener("click",function(){
        clearInterval(this.timer);//每次点击时先暂停自动播放
        if(this.index === this.slides.length - 1 ){
            this.index = 0 ;//如果为最后一张，将脚标置0
            this.wapper_ele.style.left = 0 + "px";//并将其移动显示到第一张
            this.index ++ ;//脚标加一
        }else{
            this.index ++ ;
        }
        //调用轮播图的运动
        //需要移动的元素，移动的终止位置
        this.bannerAnimation(this.wapper_ele , -this.index * 1380 );
        this.autoPlay();//移动之后再开启自动播放
    }.bind(this));//更改this指向
    //上一张按钮
    this.left_btn_ele.addEventListener("click",function(){
        clearInterval(this.timer)
        if(this.index === 0 ){
            this.index = this.slides.length - 1 ;
            this.wapper_ele.style.left = -this.index * 1380 + "px";
            this.index -- ;
        }else{
            this.index -- ;
        }
        this.bannerAnimation(this.wapper_ele , -this.index * 1380 );
        this.autoPlay();
    }.bind(this));
},

//运动
bannerAnimation : function(ele , target){
    var iNow = parseInt(getComputedStyle(ele).left);//获取元素的当前位置
    clearInterval(ele.time);//每次使用定时器前先清空定时器
    ele.time = setInterval(function(){
        //缓冲运动
        //离终点位置越近，速度越慢
        var speed = (target - iNow) / 10 ;
        //如果速度大于零，向上取整，否则向下取整
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) ;
        if(target - iNow < speed ){
            //如果当前位置距离重点位置小于速度，则直接将其达到终点位置
            ele.style.left = target +"px";
        }
        iNow += speed ;//当前位置加上速度
        ele.style.left = iNow +"px";
     },30);
}

//自动播放
//自动播放相当于重复执行下一张
autoPlay : function(){
    this.timer = setInterval(function(){
        if(this.index === this.slides.length - 1 ){
            this.index = 0 ;
            this.wapper_ele.style.left = 0 + "px";
            this.index ++ ;
        }else{
            this.index ++ ;
        }
        this.bannerAnimation(this.wapper_ele , -this.index * 1380 ,"left")
    }.bind(this),3000);
}

最后实例化一个对象即可：

new Banner() ;//实例化一个对象

本程序的HTML结构：

<div class="container">
    <div class="wapper">
        <div class="slide">
            <img src="img/1.png">
        </div>
        <div class="slide">
            <img src="img/2.png">
        </div>
        <div class="slide">
            <img src="img/3.png">
        </div>
    </div>
    <div class="left_btn"></div>
    <div class="right_btn"></div>
</div>

CSS样式：

    *{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 1380px;
        height: 350px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    .wapper{
        position: absolute;
    }
    .slide{
       width: 1380px;
       height: 350px;
       float: left;     
    }
    .left_btn{
        background-image: url(img/left_arrow.png);
        position: absolute;
        width: 52px;
        height: 52px;
        left: 10px;
        top: 149px;
    }
    .right_btn{
        background-image: url(img/right_arrow.png);
        position: absolute;
        width: 52px;
        height: 52px;
        right: 10px;
        top: 149px;
    }