亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

寫jquery插件【輪播圖】歷程

khlbat / 943人閱讀

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

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

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

插件開始

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

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

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

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

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

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

輪播圖有輪播的動畫模式

點擊頁碼可以直達想要的找的圖片那里

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

編寫代碼中

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

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

2016.12.25更新

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

2016.12.26更新

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86596.html

相關(guān)文章

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

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

    snowLu 評論0 收藏0

  • 小白成長日記：一步一步寫個輪播圖插件

    摘要：并不是所有人寫的代碼或者插件都適合小白使用，比如這是一個的滾動插件，大多數(shù)人使用了之后發(fā)現(xiàn)滾動不了，去作者提，其實是他們并不懂滾動的原理。 最近在這里看了一篇關(guān)于面試的文章《回顧自己三次失敗的面試經(jīng)歷》，作者三次倒在了輪播圖上。囧，所以我也寫個輪播圖看看。這次是用jQuery寫的，因為最近一直在研究jQuery插件的寫法，所以用jQuery寫的，而且我發(fā)現(xiàn)，我vue用太多，完全不熟悉d...

    notebin 評論0 收藏0

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

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

    DC_er 評論0 收藏0

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

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

    spacewander 評論0 收藏0

發(fā)表評論

0條評論

khlbat

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<