国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小白成長(zhǎng)日記：一步一步寫個(gè)輪播圖插件

notebin / 500人閱讀

摘要：并不是所有人寫的代碼或者插件都適合小白使用，比如這是一個(gè)的滾動(dòng)插件，大多數(shù)人使用了之后發(fā)現(xiàn)滾動(dòng)不了，去作者提，其實(shí)是他們并不懂滾動(dòng)的原理。

最近在這里看了一篇關(guān)于面試的文章《回顧自己三次失敗的面試經(jīng)歷》，作者三次倒在了輪播圖上。囧，所以我也寫個(gè)輪播圖看看。
這次是用jQuery寫的，因?yàn)樽罱恢痹谘芯縥Query插件的寫法，所以用jQuery寫的，而且我發(fā)現(xiàn)，我vue用太多，完全不熟悉dom操作，以后還是要多多用用jQuery和原生js

獻(xiàn)給小白們：jQuery插件開發(fā)精品教程，讓你的jQuery提升一個(gè)臺(tái)階

html 



    
    slide
    
    
    


    

        

            
    
                
    • 
                
    • 
                
    • 
                
    • 
                
    •

首先的插件的大體結(jié)構(gòu)如下

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

接下來就是輪播圖的大致邏輯了。

主體 初始化，動(dòng)起來

由簡(jiǎn)入繁的寫，第一步是考慮怎么讓輪播圖動(dòng)起來

輪播圖在網(wǎng)頁(yè)上大致是這個(gè)樣子的，只有一張暴露在視野內(nèi)，其他的在視野外，用overflow:hidden隱藏就行。
那動(dòng)起來就非常簡(jiǎn)單

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

初始化的話，我們需要計(jì)算整個(gè)ul的長(zhǎng)度，獲取單個(gè)li的長(zhǎng)度。

丐中丐版輪播圖 
;(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//輪播數(shù)量
        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);//計(jì)算長(zhǎng)度
            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);

到這里，輪播圖已經(jīng)在一張圖一張圖的往右跑了，輪播圖的邏輯就這么多。但是別人的輪播圖都會(huì)回頭啊，這個(gè)輪播圖跑著跑著白屏了。接下來就讓他回頭，利用聲明的index實(shí)現(xiàn)。

乞丐版輪播圖 
;(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//輪播數(shù)量
        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);//計(jì)算長(zhǎng)度
            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調(diào)為0，下一次運(yùn)行時(shí)，ul的樣式就會(huì)歸位，這樣就成功回頭
            },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);

這邊已經(jīng)實(shí)現(xiàn)了一個(gè)像模像樣的輪播圖了，但在尾->首切換的時(shí)候違和感太嚴(yán)重了，我們需要的是平滑過渡，曾經(jīng)我絞盡腦汁想不出辦法，然后花了半分鐘上網(wǎng)搜索到了答案，下次再也不瞎想了。

如上圖，在輪播圖最后復(fù)制一個(gè)輪播圖第一張，當(dāng)劃到最后一個(gè)slide1時(shí)，再立即將ul位置復(fù)原，切換到第一個(gè)slide1，我們以為劃到了第一個(gè)slide1，這樣就能實(shí)現(xiàn)平滑的過渡。

無產(chǎn)階級(jí)輪播圖 
;(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//輪播數(shù)量
        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);//計(jì)算長(zhǎng)度
            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回復(fù)到原位
                    index=1//index重置為1（這里是1，恢復(fù)到函數(shù)剛開始的索引）
                }else{
                    index++
                }
            },2000)
        },
        creat: function(){
            $($(this.element).find("ul li")[0]).clone().appendTo($(this.element).find("ul"))
        },//克隆第一個(gè)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);

好的，完整版的輪播圖就完成了，如果對(duì)輪播圖沒有任何需要，大致就是這樣了。但我們網(wǎng)站中的輪播圖多種多樣，用過插件的小伙伴也知道，很多輪播圖能自定義參數(shù)來開啟不同的功能，例如強(qiáng)大的swiper插件。接下來我們就來實(shí)現(xiàn)一些自定義的功能。

貧農(nóng)版輪播圖

自定義參數(shù)：輪播間隔時(shí)間，輪播分頁(yè)小點(diǎn)

;(function($, window, document, undefined) {
    var pluginName = "Slide",
    defaults = {//默認(rèn)參數(shù)
        pagination:true,//默認(rèn)開啟輪播分頁(yè)小點(diǎn)
        interval:2000//默認(rèn)間隔時(shí)間2s
    };//這里不明白的小白朋友們麻煩去通讀上面推薦的jquery插件的寫法，就會(huì)明白
    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//輪播數(shù)量
        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():""http://如果設(shè)置了pagination:true，創(chuàng)建小點(diǎn)
            this.addStyle(0)//給第一個(gè)小點(diǎn)添加樣式
            const content = $(this.element).find("ul");//獲取ul
            content.css("width",this.width*this.length);//計(jì)算長(zhǎng)度
            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變化，導(dǎo)致小點(diǎn)樣式變化
            },this.settings.ininterval)//將自定義時(shí)間傳入
        },
        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

    接下來就是改變下調(diào)用
    

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

    這里就起作用了。
    如果再有其他的功能，只需要往里面一步一步添加函數(shù)就可以了，比如前進(jìn)后退按鈕，比如一次滾動(dòng)多張圖片。
    
小結(jié)

    之所以要自己寫一寫這些小demo，是為了有助于我們更好的使用別人的代碼。并不是所有人寫的代碼或者插件都適合小白使用，比如better-scroll,這是一個(gè)vue的滾動(dòng)插件，大多數(shù)人使用了之后發(fā)現(xiàn)滾動(dòng)不了，去作者github提issue，其實(shí)是他們并不懂滾動(dòng)的原理。我之前也是摸索了作者的實(shí)例才成功使用的，但這個(gè)插件并不只是滾動(dòng)，還有其他應(yīng)用，比如手機(jī)端聯(lián)系人列表插件，我完全搞不懂這是怎么實(shí)現(xiàn)的，自然也使用不起來。最近我就用vue自己實(shí)現(xiàn)了一個(gè)手機(jī)端聯(lián)系人列表，非常非常之簡(jiǎn)單，一個(gè)函數(shù)搞定，難點(diǎn)在于html的合理布局，所以沒有發(fā)到這里,有興趣的小伙伴可以去github看下。
    知其然，更要知其所以然。這樣才能慢慢進(jìn)步，否則只能靠搬運(yùn)插件混生活了。
    
源碼

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

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92038.html

    相關(guān)文章

    • 回顧自己三次失敗的面試經(jīng)歷

      摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時(shí)間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

      DC_er 評(píng)論0 收藏0

    • 回顧自己三次失敗的面試經(jīng)歷

      摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時(shí)間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

      spacewander 評(píng)論0 收藏0

    • 寫jquery插件【輪播圖】歷程

      摘要：輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。 輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖 首先，輪播圖插件其實(shí)并不是我第一次寫，之前也寫過，不過那時(shí)候是按照別人的思路寫下來的，算起來大概有一年了，這次又一次開始輪播圖是因?yàn)榘葑x了《單頁(yè)面Web應(yīng)用 JavaScript從前端到后端》的這本書的1...

      khlbat 評(píng)論0 收藏0

    • 寫jquery插件【輪播圖】歷程

      摘要：輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。 輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖 首先，輪播圖插件其實(shí)并不是我第一次寫，之前也寫過，不過那時(shí)候是按照別人的思路寫下來的，算起來大概有一年了，這次又一次開始輪播圖是因?yàn)榘葑x了《單頁(yè)面Web應(yīng)用 JavaScript從前端到后端》的這本書的1...

      snowLu 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <