成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

寫jquery插件【輪播圖】歷程

snowLu / 1933人閱讀

摘要：輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。

輪播圖插件的任務(wù)已經(jīng)接近尾聲，在書寫輪播圖期間確實(shí)有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖

首先，輪播圖插件其實(shí)并不是我第一次寫，之前也寫過，不過那時(shí)候是按照別人的思路寫下來的，算起來大概有一年了，這次又一次開始輪播圖是因?yàn)榘葑x了《單頁面Web應(yīng)用 JavaScript從前端到后端》的這本書的1-4章，我開始躍躍欲試的想把它用到自己的代碼中，書本中前四章的思想是將js模塊化，我就跟著作者的代碼思路以及代碼習(xí)慣先嘗試著做了個(gè)輪播圖，發(fā)現(xiàn)作者的模塊化思想非常好，時(shí)間長(zhǎng)了，養(yǎng)成這種思考問題的習(xí)慣會(huì)在工作中事半功倍。其實(shí)就像一個(gè)人的生活習(xí)慣，比較講究的人會(huì)按照事物的屬性給分門別類，并且將事物放在指定的位置，這樣到時(shí)候找起來也會(huì)比較方便快捷，不僅是關(guān)系到找東西，如果是有相同屬性的東西進(jìn)來的時(shí)候，也就順理成章的放到相同屬性的那里去，這樣管理起來也非常方便。

插件開始

剛開始的時(shí)候遇到了問題，作者是從單個(gè)頁面直接入手的，我只想寫個(gè)插件，那不能跟作者似的多帶帶放在一個(gè)頁面中吧？？？

首先，我起一個(gè)跟功能相似的名字FocusMap，然后直接就將他作為相應(yīng)的插件，不會(huì)再深入的加入詳細(xì)的模塊了，現(xiàn)在FocusMap就是輪播圖插件；里邊的變量、函數(shù)都是跟輪播圖的功能相關(guān)聯(lián)的。

其次，設(shè)計(jì)插件的思路:

輪播圖根據(jù)用戶設(shè)定的圖片，在輪播的區(qū)域內(nèi)顯示相應(yīng)的圖片

輪播圖有展示后一張的功能

輪播圖有展示前一張的功能

輪播圖有輪播的動(dòng)畫模式

點(diǎn)擊頁碼可以直達(dá)想要的找的圖片那里

恩，基本功能就這些，然后開始編寫代碼
附線框圖一張：

編寫代碼中

代碼編寫中遇到問題是在正常不過的，恩，我的也出現(xiàn)了不少問題，首先實(shí)現(xiàn)的是自動(dòng)輪播，好，自動(dòng)輪播實(shí)現(xiàn)好了，接著實(shí)現(xiàn)點(diǎn)擊上一張的功能吧，發(fā)現(xiàn)自動(dòng)輪播好像哪里寫的不對(duì)勁，哦my噶，檢查檢查，看哪里想的不對(duì)勁，看看能不能改，不能改重新來，恩，是能改的，好事，給老公一看，你這里好多重復(fù)的，好多dom改動(dòng)，看看能不能整合到一起，代碼看看能不能簡(jiǎn)化，大大的白眼，不過還是聽從了建議，適當(dāng)?shù)恼砹艘槐?，恩，比以前有些好看了?/p> 尾聲

東西快做完了，但是bug也隨之而來，此時(shí)的我的在線作品還是有2個(gè)bug的，大寫的鄙視，大家不要怪我嘍，說是還沒有完工么?。?！不過會(huì)盡快做完，以一個(gè)好的姿態(tài)來面對(duì)大家，還有我！

2016.12.25更新

bug已經(jīng)修改完畢，線上的效果是正確的，如果有人發(fā)現(xiàn)bug，請(qǐng)批評(píng)指正，多謝！！

2016.12.26更新

1、在原來的基礎(chǔ)上改動(dòng)，使其做為jquery的插件形式，調(diào)用形式：

$(".focusMap").FocusMap({
    imgArray : imgArray,     //頁面中需要輸入的圖片信息
    animate_mode : animate_mode //定義頁面中的滑動(dòng)樣式 slide滑動(dòng)，fade漸隱漸現(xiàn)
 })

重新起一個(gè)新頁面，算是2.0的版本吧，
有興趣的同學(xué)可以戳這里：yangmengya的輪播圖插件

2、優(yōu)化代碼，將重復(fù)的代碼聚合到一起，減少代碼重復(fù)

3、用戶可以通過自定義來設(shè)置圖片滑動(dòng)的時(shí)間間隔，和漸隱漸現(xiàn)的時(shí)間間隔，例如：

  $(".focusMap").FocusMap({
          imgArray : [
            "image/slide_01.png",
            "image/slide_02.png",
            "image/slide_03.png"
          ],
          animate_mode : "slide",
          change_time : 3000, //圖片變換的時(shí)間間隔
          slide_time : 500, //slide 動(dòng)畫時(shí)間間隔
          fadein_time : 800, //fade漸現(xiàn)的時(shí)間
          fadeout_time : 100, //fade漸隱的時(shí)間
        })

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

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

相關(guān)文章

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

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

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

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

    摘要：并不是所有人寫的代碼或者插件都適合小白使用，比如這是一個(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用太多，完全不熟悉d...

    notebin 評(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年僅僅還剩下不到兩...

    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

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

0條評(píng)論

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