浅谈无缝轮播图插件封装

前言：页面中轮播图，对于一个前端开发者来说，是最基本的技能，不论是的商城网站，还是企业站，轮播图已经成为不可缺少的一个模块，而常见的轮播图不外乎两种，一种是渐隐渐现轮播图，一种是无缝轮播图。网上关于轮播图的件也有很多，但是用人家的代码总会出现各种各样的bug，我们修改bug往往要耗费很多时间，而且有些插件的效果还不符合我们的需求，那么我们该如何封装一个自己的轮播插件呢？这就是我们今天的任务，封装轮播插件。

1、特效离不开合理的页面布局，所以我们首先需要进行页面布局：
HTML代码：

<div class="container mycontainer">
    <div class="wrapper">
        <div class="slide">
            <img src="image/jd01.jpg" alt="">
        </div>
        <div class="slide">
            <img src="image/jd02.jpg" alt="">
        </div>
        <div class="slide">
            <img src="image/jd03.jpg" alt="">
        </div>
        <div class="slide">
            <img src="image/jd04.jpg" alt="">
        </div>
    </div>
    <!-- 分页器 -->
    <ul class="pagination"></ul>
    <!-- 导航按钮 -->
    <div class="button-pre"></div>
    <div class="button-next"></div>
</div>

2、在HTML页面中引入css样式文件：css样式文件代码如下：
CSS代码：

* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

.container {   
    margin: 200px auto;
    position: relative;
    overflow: hidden;
}

.slide {
    float: left;
}

img {
    display: block;
}

.pagination {
    width: 160px;
    position: absolute;
    bottom: 30px;
    margin-left: -80px;
    left: 50%;
}

.pagination li {
    float: left;
    width: 20px;
    height: 20px;
    background-color: blue;
    margin: 0 10px;
    border-radius: 50%;
}

.button-pre,
.button-next {
    width: 22px;
    height: 40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
}

.button-pre {
    left: 30px;
    background: url('../image/left.png') no-repeat center center;
}

.button-next {
    right: 30px;
    background: url('../image/right.png') no-repeat center center;
}

.pagination .active {
    background-color: red;
}
.mycontainer{
    width: 590px;
    height: 470px;
}

页面布局完成后，接下来就是javaScript代码，绑定事件；

在绑定事件之前，我们首先要知道无缝轮播图的原理和一些技术关键点。
轮播图的原理：最外层视野区域固定大小且的溢出隐藏，通过动态控制包裹图片的父元素的marginLeft值实现轮播；
关键点1：最外层的盒子container固定大小，是我们的视野区域，需要设置溢出隐藏overflow：hidden；
关键点2：所有轮播的图片使用一个共同的父元素wrapper包裹起来；
关键点3：动态克隆第一张图片所在的元素silde，然后添加到最后；
关键点4：父元素wrapper的宽度为图片个数（原始图片个数+1，因为克隆多添加了一张图片）乘以单独一张图片的宽度；
关键点5：实现无缝轮播的判断条件，marginleft样式重置时机；
关键点6：动态生成分页器按钮，并设置分页器pagination样式；
关键点7：实现自动播放和清除播放，使用计时器setInterval（）和 clearInterval（）
关键点8：实现代码复用，借助面向对象的开发——构造函数+原型对象+jQuery插件封装机制实现

3、关键点梳理完之后，就可以开始javascript代码：通过自执行函数实现；需要在HTML页面引入JS文件，JS文件代码如下：
JS代码：

;(function($){
    // 默认设置
    var defaults = {
        speed:1000,
        interval:2000
    }
    function Banner(ele,options){
        // 获取元素对象
        this.element = $(ele);
        // 合并设置项
        this.options = $.extend({},defaults,options);
        // 获取包裹图片的父元素
        this.wrapper = this.element.children().first();
        // 获取要克隆的元素
        this.firstChild = this.wrapper.find('.slide:first');
        // 获取一张图片宽度
        this.Width = this.firstChild.width();
        // 记录图片下标
        this.n = 0;
        // 获取图片个数
        this.len = this.wrapper.find('.slide').length;
        // 获取切换导航按钮
        this.prev = this.element.find('.button-pre');
        this.next = this.element.find('.button-next');
        // 获取分页器
        this.pagination = this.element.find('.pagination');
        // 计时器
        this.timer = null;
    }
    // 初始化
    Banner.prototype.init = function(){
        var self = this;       
        (function () {
            // 克隆第一张图片并添加到元素的最后边，设置包裹图片父盒子的宽度
            self.wrapper.append(self.firstChild.clone(true));
            self.wrapper.css({ width:self.Width * (self.len + 1)});
            // 生成对应的分页器按钮
            for(var i = 0; i < self.len; i++){
                $('<li></li>').appendTo(self.pagination); 
            }
            // 动态设置分页器的样式
            self.pagination.find('li:first').addClass('active');
            var btnWidth = self.pagination.find('li:first').outerWidth(true) * self.len;
            self.pagination.css({width:btnWidth,marginLeft:-btnWidth / 2})
        })() 
        // 调用所有绑定的事件
        this.nextClick();    
        this.preClick();   
        this.btnClick();
        this.autoPlay();
        this.clearPlay(this.element);
    }
    // 切换下一张图片事件
    Banner.prototype.nextClick = function(){
        var self = this;
        this.next.click(function(){
            self.moveNext();
        })
    }
    // 切换图片，同时也为实现自动播放
   Banner.prototype.moveNext = function() {
        this.n++;
        // 判断重置时机和重置样式
        if (this.n > this.len ) {
            this.n = 1;
            this.wrapper.css({ marginLeft: 0 });
        }
        this.changeBtn(this.n > 3 ? 0 : this.n);
        this.wrapper.stop(true,true).animate({ marginLeft: -this.Width * this.n }, this.options.speed)
    }

    // 点击切换上一张图片
    Banner.prototype.preClick = function(){
        var self = this;
        this.prev.click(function () {
            self.n--;
            if (self.n < 0) {
                self.n = self.len - 1;
               self.wrapper.css({ marginLeft: -(self.len) * self.Width });
            }
            self.changeBtn(self.n < 0 ? self.n = 3 : self.n);
            self.wrapper.animate({ marginLeft: -self.Width * self.n }, self.options.speed)
        })
    }
    // 点击分页器切换图片
    Banner.prototype.btnClick = function(){
        var self = this;         
         this.pagination.find('li').click(function () {
            var index = $(this).index();
            self.n = index;
            self.changeBtn(index);
           self.wrapper.animate({ marginLeft: -self.Width * index }, self.options.speed)
        })
    }
    // 动态修改分页器按钮的样式
    Banner.prototype.changeBtn = function(index){
        this.pagination.find('li').eq(index).addClass('active').siblings().removeClass('active');
    }
    // 自动轮播
    Banner.prototype.autoPlay = function(){
        var self = this;
        /*  计时器中调用函数是，函数中的this 指向 window， 所以需要使用self.timer = setInterval(function(){
             self.moveNext();
         },2000);
         不能直接使用  self.timer = setInterval(self.moveNext(),2000); 形式 */
        self.timer = setInterval(function(){
            self.moveNext();
        },self.options.interval);
    }
    // 清除自动播放
    Banner.prototype.clearPlay = function(ele){
        var self = this;
        ele.mouseenter(function(){
           clearInterval(self.timer)
        }).mouseleave(function(){
            // 再次开启自动轮播
            self.timer = setInterval(function(){
                self.moveNext();
            },self.options.interval);
        })
    }
    // jQuery插件实现
$.fn.myBanner = function(params){
        // params 是自定义的配置项
        var banner = new Banner(this,params);
        banner.init();
        // 如果需要链式调用
        return  this;
    }
})(jQuery)

最后在HTML页面中进行初始化，最好放到HTML结束标签之前的位置，因为我们封装的插件是依赖于jQuery的，因此首先引入jQuery文件，然后在引入我们自己封装的js文件；最后就是进行初始化设置：

<script>
    $(function(){
         $('.mycontainer').myBanner({
            //  speed:图片切换速度
            // interval：图片切换的时间间隔
             speed:500,
             interval:3000
         });
    })
   

</script>

到此为止，我们已经实现了轮播插件的封装并且实现了复用，只需要动态的绑定不同的元素mycontainer（可以动态修改成自己的元素名字）即可实现复用。

4、如果需要修改容器的大小和图片的大小,可以直接覆盖样式即可：

.mycontainer2{
    width: 300px;
    height:200px;
}
.mycontainer2 img{
    width: 300px;
    height:200px;
}

5、完成。恭喜你，你的轮播插件可以正常切换了