博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小白成长日记:一步一步写个轮播图插件
阅读量:6435 次
发布时间:2019-06-23

本文共 8334 字,大约阅读时间需要 27 分钟。

最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》,作者三次倒在了轮播图上。囧,所以我也写个轮播图看看。

这次是用jQuery写的,因为最近一直在研究jQuery插件的写法,所以用jQuery写的,而且我发现,我vue用太多,完全不熟悉dom操作,以后还是要多多用用jQuery和原生js

献给小白们:

html

    
slide

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

;(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="
    " $(this.element).append(ol) let li="
  1. " for(i=1;i

    接下来就是改变下调用

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

    这里就起作用了。

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

    小结

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

    知其然,更要知其所以然。这样才能慢慢进步,否则只能靠搬运插件混生活了。

    源码

    转载地址:http://tgxga.baihongyu.com/

    你可能感兴趣的文章
    windows server21012 r2 密钥
    查看>>
    springboot自定义参数解析HandlerMethodArgumentResolver
    查看>>
    Factorial Trailing Zeroes@LeetCode
    查看>>
    北大发布新零售之城发展指数报告,上海超北京成榜首
    查看>>
    python urllib爬取网页编码问题
    查看>>
    Ecplise设置全局编码为UTF-8的方法
    查看>>
    【话题】从亚马逊、阿里到网易,为什么电商们都想开家线下店?
    查看>>
    JMS的常用方法
    查看>>
    Java并发编程笔记之Timer源码分析
    查看>>
    udp客户端收发数据流程
    查看>>
    MXNet 中的几个数据集
    查看>>
    JS 引擎 V8 发布 v7.4,性能又大幅提高了
    查看>>
    确认过眼神?上云之路需要遇上对的人!
    查看>>
    无人机专用传感器,探测废墟中的生命气息
    查看>>
    美政府研究人们驾驶走神时间,证明自动驾驶的必要性
    查看>>
    gcc编译系统
    查看>>
    1分钟链圈 | 全球的第一个法定数字货币诞生
    查看>>
    漫画区块链,一文带你秒懂她!
    查看>>
    「视频」无人机竞赛火热,观众观赛体验不佳
    查看>>
    隐私与机器学习,二者可以兼得吗?
    查看>>