無限輪播圖的製做

url： http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/huanyouji/index.html

（若是打開過慢，或者打不開，緣由你懂得。）

1、思路

一、全部滑動效果的demo都是經過控制css裏的left值，來控制滑動效果的。

二、須要兩個塊，一個div塊，一個ui。div塊的position是relative，ui塊的position是absolute。這樣ui塊的left就能夠根據外層的div來控制。div的overflow是hidden，由於ui裏面的li的float是left的，ui的寬度一定比div寬，可是要保證只顯示一張圖，因此超出div的部分隱藏掉。

三、兩個按鈕，這兩個按鈕，無非就是控制UI的left值變化，以每一張圖的寬度爲限，進行加或減的運算。

四、所謂無限輪播，只是在不停點擊按鈕的時候，圖片會一直向左，或者向右轉動，而不是像某些輪轉圖，當到達零界點時，發生跳轉。這個時候，咱們就要複製第一張圖，把第一張插入整個ui的最後，把最後一張圖，複製插入整個ui的首位。當點擊到咱們複製的圖片時，就直接定位到，最後一張圖，或者第一張圖。這種快速的定位，不會有任何間隙的產生。

五、自動播放，也就是當頁面載入的時候，設定一個定時器，讓這個定時器，調用自身。定時器的fn沒法就是點擊按鈕，讓圖片本身轉動起來。

六、當鼠標移入時，中止定時器，當鼠標移出的時候，啓動定時器。

七、當點擊按鈕的時候，判斷當前是否處於動畫狀態，處於動畫狀態，就移除對left的控制，不處於動畫狀態，就執行對left的控制，這個主要是考慮到，當用戶不停地點擊按鈕時，圖片會不停的輪轉，點擊了多少次，就執行多少次點擊函數。這是一種很差的用戶體驗。

2、代碼

具體效果代碼。能夠點擊上面的url，查看推敲，我是用avalon和jquery結合作的。

3、總結

一、基本上全部的動畫效果，都是經過控制css屬性來實現的，無論是漸變、滑動、切換、彈出、消失、隱藏。js只是實現一個控制的功能。

二、對於組件使用的見解，js的ui組件不少，個人見解是，項目中有自信的能夠本身作，沒自信的就用，比較一個好的ui庫是比本身寫的完善不少的，項目不是讓本身練手的東西。本身的小demo，能夠用js原生來寫，用jq來寫，都隨意，這是體現本身實力的東西。

<--待完善-->

忽然發現一些小BUG，基本想法就是這樣，待我填坑。

來自爲知筆記(Wiz)