摘要:輪播圖插件的任務已經接近尾聲,在書寫輪播圖期間確實有一些小的感觸的。
輪播圖插件的任務已經接近尾聲,在書寫輪播圖期間確實有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖
首先,輪播圖插件其實并不是我第一次寫,之前也寫過,不過那時候是按照別人的思路寫下來的,算起來大概有一年了,這次又一次開始輪播圖是因為拜讀了《單頁面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漸隱的時間 })
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86596.html
摘要:輪播圖插件的任務已經接近尾聲,在書寫輪播圖期間確實有一些小的感觸的。 輪播圖插件的任務已經接近尾聲,在書寫輪播圖期間確實有一些小的感觸的。感興趣的可以訪問我的輪播圖的線上地址:輪播圖 首先,輪播圖插件其實并不是我第一次寫,之前也寫過,不過那時候是按照別人的思路寫下來的,算起來大概有一年了,這次又一次開始輪播圖是因為拜讀了《單頁面Web應用 JavaScript從前端到后端》的這本書的1...
摘要:并不是所有人寫的代碼或者插件都適合小白使用,比如這是一個的滾動插件,大多數人使用了之后發現滾動不了,去作者提,其實是他們并不懂滾動的原理。 最近在這里看了一篇關于面試的文章《回顧自己三次失敗的面試經歷》,作者三次倒在了輪播圖上。囧,所以我也寫個輪播圖看看。這次是用jQuery寫的,因為最近一直在研究jQuery插件的寫法,所以用jQuery寫的,而且我發現,我vue用太多,完全不熟悉d...
摘要:站在這個時間點上,我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷,依然是與輪播圖有關。當然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經來到了2017年的11月份,距離2018年僅僅還剩下不到兩...
摘要:站在這個時間點上,我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷,依然是與輪播圖有關。當然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經來到了2017年的11月份,距離2018年僅僅還剩下不到兩...
閱讀 986·2021-09-26 10:15
閱讀 2064·2021-09-24 10:37
閱讀 2580·2019-08-30 13:46
閱讀 2631·2019-08-30 11:16
閱讀 2421·2019-08-29 10:56
閱讀 2591·2019-08-26 12:24
閱讀 3472·2019-08-23 18:26
閱讀 2662·2019-08-23 15:43