資訊專欄INFORMATION COLUMN
摘要：輪播圖插件的任務已經(jīng)接近尾聲，在書寫輪播圖期間確實有一些小的感觸的。
輪播圖插件的任務已經(jīng)接近尾聲，在書寫輪播圖期間確實有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖
首先，輪播圖插件其實并不是我第一次寫，之前也寫過，不過那時候是按照別人的思路寫下來的，算起來大概有一年了，這次又一次開始輪播圖是因為拜讀了《單頁面Web應用 JavaScript從前端到后端》的這本書的1-4章，我開始躍躍欲試的想把它用到自己的代碼中，書本中前四章的思想是將js模塊化，我就跟著作者的代碼思路以及代碼習慣先嘗試著做了個輪播圖，發(fā)現(xiàn)作者的模塊化思想非常好，時間長了，養(yǎng)成這種思考問題的習慣會在工作中事半功倍。其實就像一個人的生活習慣，比較講究的人會按照事物的屬性給分門別類，并且將事物放在指定的位置，這樣到時候找起來也會比較方便快捷，不僅是關系到找東西，如果是有相同屬性的東西進來的時候，也就順理成章的放到相同屬性的那里去，這樣管理起來也非常方便。
插件開始剛開始的時候遇到了問題，作者是從單個頁面直接入手的，我只想寫個插件，那不能跟作者似的多帶帶放在一個頁面中吧？？？
首先，我起一個跟功能相似的名字FocusMap，然后直接就將他作為相應的插件，不會再深入的加入詳細的模塊了，現(xiàn)在FocusMap就是輪播圖插件；里邊的變量、函數(shù)都是跟輪播圖的功能相關聯(lián)的。
其次，設計插件的思路:
輪播圖根據(jù)用戶設定的圖片，在輪播的區(qū)域內顯示相應的圖片
輪播圖有展示后一張的功能
輪播圖有展示前一張的功能
輪播圖有輪播的動畫模式
點擊頁碼可以直達想要的找的圖片那里
恩，基本功能就這些，然后開始編寫代碼
附線框圖一張：
代碼編寫中遇到問題是在正常不過的，恩，我的也出現(xiàn)了不少問題，首先實現(xiàn)的是自動輪播，好，自動輪播實現(xiàn)好了，接著實現(xiàn)點擊上一張的功能吧，發(fā)現(xiàn)自動輪播好像哪里寫的不對勁，哦my噶，檢查檢查，看哪里想的不對勁，看看能不能改，不能改重新來，恩，是能改的，好事，給老公一看，你這里好多重復的，好多dom改動，看看能不能整合到一起，代碼看看能不能簡化，大大的白眼，不過還是聽從了建議，適當?shù)恼砹艘槐?，恩，比以前有些好看了?/p> 尾聲
東西快做完了，但是bug也隨之而來，此時的我的在線作品還是有2個bug的，大寫的鄙視，大家不要怪我嘍，說是還沒有完工么?。?！不過會盡快做完，以一個好的姿態(tài)來面對大家，還有我！
2016.12.25更新bug已經(jīng)修改完畢，線上的效果是正確的，如果有人發(fā)現(xiàn)bug，請批評指正，多謝??！
2016.12.26更新1、在原來的基礎上改動，使其做為jquery的插件形式，調用形式：
$(".focusMap").FocusMap({
imgArray : imgArray, //頁面中需要輸入的圖片信息
animate_mode : animate_mode //定義頁面中的滑動樣式 slide滑動，fade漸隱漸現(xiàn)
})
重新起一個新頁面，算是2.0的版本吧，
有興趣的同學可以戳這里：yangmengya的輪播圖插件
2、優(yōu)化代碼，將重復的代碼聚合到一起，減少代碼重復
3、用戶可以通過自定義來設置圖片滑動的時間間隔，和漸隱漸現(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漸隱的時間
})
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/86596.html
摘要：輪播圖插件的任務已經(jīng)接近尾聲，在書寫輪播圖期間確實有一些小的感觸的。 輪播圖插件的任務已經(jīng)接近尾聲，在書寫輪播圖期間確實有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖 首先，輪播圖插件其實并不是我第一次寫，之前也寫過，不過那時候是按照別人的思路寫下來的，算起來大概有一年了，這次又一次開始輪播圖是因為拜讀了《單頁面Web應用 JavaScript從前端到后端》的這本書的1...
摘要：并不是所有人寫的代碼或者插件都適合小白使用，比如這是一個的滾動插件，大多數(shù)人使用了之后發(fā)現(xiàn)滾動不了，去作者提，其實是他們并不懂滾動的原理。 最近在這里看了一篇關于面試的文章《回顧自己三次失敗的面試經(jīng)歷》，作者三次倒在了輪播圖上。囧，所以我也寫個輪播圖看看。這次是用jQuery寫的，因為最近一直在研究jQuery插件的寫法，所以用jQuery寫的，而且我發(fā)現(xiàn)，我vue用太多，完全不熟悉d...
摘要：站在這個時間點上，我對自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...
摘要：站在這個時間點上，我對自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...
閱讀 1021·2021-09-26 10:15
閱讀 2128·2021-09-24 10:37
閱讀 2609·2019-08-30 13:46
閱讀 2666·2019-08-30 11:16
閱讀 2448·2019-08-29 10:56
閱讀 2620·2019-08-26 12:24
閱讀 3506·2019-08-23 18:26
閱讀 2689·2019-08-23 15:43
