小白成长日记：一步一步写个轮播图插件

头像
羽叶千寻
    阅读 10 分钟
    1

    最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》，作者三次倒在了轮播图上。囧，所以我也写个轮播图看看。
    这次是用jQuery写的，因为最近一直在研究jQuery插件的写法，所以用jQuery写的，而且我发现，我vue用太多，完全不熟悉dom操作，以后还是要多多用用jQuery和原生js

    献给小白们：jQuery插件开发精品教程，让你的jQuery提升一个台阶

    html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slide</title>
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
    <script src="jquery.js"></script>
    <style>
    *{
        margin:0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    ul{
        display: flex;
        position: relative;
    }
    .contain{
        width: 600px;
        overflow: hidden;
        position: relative;
    }
    ol{
        position: absolute;
        bottom:10px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    ol li{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #f60;
        margin:0 2px;
    }
    .conActive{
        background-color: #fff;
    }
</style>
</head>
<body>
    <div id="slide">
        <div class="contain">
            <ul>
                <li><img src="img/img11.jpg" alt=""></li>
                <li><img src="img/img21.jpg" alt=""></li>
                <li><img src="img/img33.jpg" alt=""></li>
                <li><img src="img/img39.jpg" alt=""></li>
                <li><img src="img/img55.jpg" alt=""></li>
            </ul>
        </div>
    </div>
    <style>
        $(function() {
            $(".contain").Slide()
        })
    </style>
</body>
</html>

    首先的插件的大体结构如下

    ;(function($, window, document, undefined) {
    var pluginName = "Slide",
    defaults = {
        
    };
    function Slide(element, options) {
        this.element = element;
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.version = 'v1.0.0';
        this.init();
    }
    Slide.prototype = {
        init: function() {
            
        }       
    };
    $.fn[pluginName] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Slide(this, options));
            }
        });
        return this;
    };
})(jQuery, window, document);

    接下来就是轮播图的大致逻辑了。

    主体

    初始化，动起来

    由简入繁的写，第一步是考虑怎么让轮播图动起来
    图片描述

    轮播图在网页上大致是这个样子的，只有一张暴露在视野内，其他的在视野外，用overflow:hidden隐藏就行。
    那动起来就非常简单

    $(element).animate({right:index*this.width+'px'}, 1000)//jQuery中animate方法

    初始化的话，我们需要计算整个ul的长度，获取单个li的长度。

    丐中丐版轮播图

    ;(function($, window, document, undefined) {
    var pluginName = "Slide",
    defaults = {
        
    };
    function Slide(element, options) {
        this.element = element;
        this.width = $(this.element).find('ul li img')[0].width;//图片宽度
        this.length = $(this.element).find('ul li').length//轮播数量
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.version = 'v1.0.0';
        this.init();
    }
    Slide.prototype = {
        init: function() {
            let index=1//索引
            const content = $(this.element).find('ul');//获取ul
            content.css('width',this.width*this.length);//计算长度
            this.autoplay(content,index)
        },
        autoplay: function(content,index) {
            const _this=this;
            timer=setInterval(function(){
                $(content).animate({right:index*this.width+'px'}, 1000)
                index++
            },2000)
        }       
    };
    $.fn[pluginName] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Slide(this, options));
            }
        });
        return this;
    };
})(jQuery, window, document);

    到这里，轮播图已经在一张图一张图的往右跑了，轮播图的逻辑就这么多。但是别人的轮播图都会回头啊，这个轮播图跑着跑着白屏了。接下来就让他回头，利用声明的index实现。

    乞丐版轮播图

    ;(function($, window, document, undefined) {
    var pluginName = "Slide",
    defaults = {
        
    };
    function Slide(element, options) {
        this.element = element;
        this.width = $(this.element).find('ul li img')[0].width;//图片宽度
        this.length = $(this.element).find('ul li').length//轮播数量
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.version = 'v1.0.0';
        this.init();
    }
    Slide.prototype = {
        init: function() {
            let index=1//索引
            const content = $(this.element).find('ul');//获取ul
            content.css('width',this.width*this.length);//计算长度
            this.autoplay(content,index)
        },
        autoplay: function(content,index) {
            const _this=this;
            timer=setInterval(function(){
                $(content).animate({right:index*this.width+'px'}, 1000)
                index===this.length-1?index=0:index++//如果索引到了this.length-1,说明到了最后一张图片，我们将index调为0，下一次运行时，ul的样式就会归位，这样就成功回头
            },2000)
        }       
    };
    $.fn[pluginName] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Slide(this, options));
            }
        });
        return this;
    };
})(jQuery, window, document);

    这边已经实现了一个像模像样的轮播图了，但在尾->首切换的时候违和感太严重了，我们需要的是平滑过渡，曾经我绞尽脑汁想不出办法，然后花了半分钟上网搜索到了答案，下次再也不瞎想了。
    图片描述

    如上图，在轮播图最后复制一个轮播图第一张，当划到最后一个slide1时，再立即将ul位置复原，切换到第一个slide1，我们以为划到了第一个slide1，这样就能实现平滑的过渡。

    无产阶级轮播图

    ;(function($, window, document, undefined) {
    var pluginName = "Slide",
    defaults = {
        
    };
    function Slide(element, options) {
        this.element = element;
        this.width = $(this.element).find('ul li img')[0].width;//图片宽度
        this.length = $(this.element).find('ul li').length//轮播数量
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.version = 'v1.0.0';
        this.init();
    }
    Slide.prototype = {
        init: function() {
            let index=1//索引
            const content = $(this.element).find('ul');//获取ul
            content.css('width',this.width*this.length);//计算长度
            this.autoplay(content,index)
        },
        autoplay: function(content,index) {
            const _this=this;
            timer=setInterval(function(){
                $(content).animate({right:index*_this.width+'px'}, 1000)
                if(index===_this.length){
                    $(content).animate({right:0+'px'}, 0)//将ul回复到原位
                    index=1//index重置为1（这里是1，恢复到函数刚开始的索引）
                }else{
                    index++
                }
            },2000)
        },
        creat: function(){
            $($(this.element).find('ul li')[0]).clone().appendTo($(this.element).find('ul'))
        },//克隆第一个li再添加到ul       
    };
    $.fn[pluginName] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Slide(this, options));
            }
        });
        return this;
    };
})(jQuery, window, document);

    好的，完整版的轮播图就完成了，如果对轮播图没有任何需要，大致就是这样了。但我们网站中的轮播图多种多样，用过插件的小伙伴也知道，很多轮播图能自定义参数来开启不同的功能，例如强大的swiper插件。接下来我们就来实现一些自定义的功能。

    贫农版轮播图

    自定义参数：轮播间隔时间，轮播分页小点

    ;(function($, window, document, undefined) {
    var pluginName = "Slide",
    defaults = {//默认参数
        pagination:true,//默认开启轮播分页小点
        interval:2000//默认间隔时间2s
    };//这里不明白的小白朋友们麻烦去通读上面推荐的jquery插件的写法，就会明白
    function Slide(element, options) {
        this.element = element;
        this.width = $(this.element).find('ul li img')[0].width;//图片宽度
        this.length = $(this.element).find('ul li').length//轮播数量
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.version = 'v1.0.0';
        this.init();
    }
    Slide.prototype = {
        init: function() {
            let index=1;
            this.creat();
            this.settings.pagination?this.pagination():''//如果设置了pagination:true，创建小点
            this.addStyle(0)//给第一个小点添加样式
            const content = $(this.element).find('ul');//获取ul
            content.css('width',this.width*this.length);//计算长度
            this.autoplay(content,index)
        },
        autoplay: function(content,index) {
            const _this=this
            timer=setInterval(function(){
                console.log(index*this.width)
                $(content).animate({right:index*_this.width+'px'}, 1000)
                if(index===_this.length){
                    $(content).animate({right:0+'px'}, 0)
                    index=1
                }else{
                    index++
                }
                _this.addStyle(index-1)//index变化，导致小点样式变化
            },this.settings.ininterval)//将自定义时间传入
        },
        creat: function(){
            $($(this.element).find('ul li')[0]).clone().appendTo($(this.element).find('ul'))
        },
        pagination: function(index){
            let ol="<ol></ol>"
            $(this.element).append(ol)
            let li="<li></li>"
            for(i=1;i<this.length;i++){
                $(this.element).find('ol').append(li)
            }//创建分页小点             
        },
        addStyle: function(index){
            let active=$(this.element).find('ul li')[index]
            $(active).addClass('active').siblings().removeClass('active')
            if(this.settings.pagination){
                let conActive=$(this.element).find('ol li')[index]
                $(conActive).addClass('conActive').siblings().removeClass('conActive')
            }
        }//给活动的轮播图和小点添加样式      
    };
    $.fn[pluginName] = function(options) {
        this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Slide(this, options));
            }
        });
        return this;
    };
})(jQuery, window, document);

    接下来就是改变下调用

    $(function() {
    $(".contain").Slide({
            pagination:false,
            interval:5000
        })
    })

    这里就起作用了。
    如果再有其他的功能，只需要往里面一步一步添加函数就可以了，比如前进后退按钮，比如一次滚动多张图片。

    小结

    之所以要自己写一写这些小demo，是为了有助于我们更好的使用别人的代码。并不是所有人写的代码或者插件都适合小白使用，比如better-scroll,这是一个vue的滚动插件，大多数人使用了之后发现滚动不了，去作者github提issue，其实是他们并不懂滚动的原理。我之前也是摸索了作者的实例才成功使用的，但这个插件并不只是滚动，还有其他应用，比如手机端联系人列表插件，我完全搞不懂这是怎么实现的，自然也使用不起来。最近我就用vue自己实现了一个手机端联系人列表，非常非常之简单，一个函数搞定，难点在于html的合理布局，所以没有发到这里,有兴趣的小伙伴可以去github看下。
    知其然，更要知其所以然。这样才能慢慢进步，否则只能靠搬运插件混生活了。

    源码

    https://github.com/yuyeqianxu...

    javascriptjquery
    羽叶千寻
    133 声望6 粉丝
    « 上一篇
    小白成长日记：写个贪吃蛇

    引用和评论

    推荐阅读
    头像
    如何实现一个楼中楼的评论系统

    小蚊酱赞 24阅读 10.3k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.7k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.3k评论 2

    0 条评论
    得票最新