寫jquery插件【輪播圖】歷程

snowLu 發布于2019-08-01 16:07 / 1910人閱讀

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

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

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

插件開始

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

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

其次，設計插件的思路:

輪播圖根據用戶設定的圖片，在輪播的區域內顯示相應的圖片

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

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

輪播圖有輪播的動畫模式

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

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

編寫代碼中

代碼編寫中遇到問題是在正常不過的，恩，我的也出現了不少問題，首先實現的是自動輪播，好，自動輪播實現好了，接著實現點擊上一張的功能吧，發現自動輪播好像哪里寫的不對勁，哦my噶，檢查檢查，看哪里想的不對勁，看看能不能改，不能改重新來，恩，是能改的，好事，給老公一看，你這里好多重復的，好多dom改動，看看能不能整合到一起，代碼看看能不能簡化，大大的白眼，不過還是聽從了建議，適當的整理了一遍，恩，比以前有些好看了。

尾聲

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

2016.12.25更新

bug已經修改完畢，線上的效果是正確的，如果有人發現bug，請批評指正，多謝！！

2016.12.26更新

1、在原來的基礎上改動，使其做為jquery的插件形式，調用形式：

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

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

2、優化代碼，將重復的代碼聚合到一起，減少代碼重復

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

  $(".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漸現的時間
          fadeout_time : 100, //fade漸隱的時間
        })

GPU云服務器云服務器輪播圖寫輪播圖將輪播圖 php輪播圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50308.html

寫jquery插件【輪播圖】歷程

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

khlbat 2019-08-21 11:21 評論0 收藏0
小白成長日記：一步一步寫個輪播圖插件

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

notebin 2019-08-22 11:15 評論0 收藏0
回顧自己三次失敗的面試經歷

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

DC_er 2019-08-21 17:42 評論0 收藏0
回顧自己三次失敗的面試經歷

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

spacewander 2019-08-29 13:50 評論0 收藏0