輪播的實(shí)現(xiàn)原理是怎樣的？如果讓你來實(shí)現(xiàn)，你會(huì)抽象出哪些函數(shù)(or接口)供使用？
在實(shí)現(xiàn)輪播之前首先要確定要實(shí)現(xiàn)什么樣的輪播：
- 對(duì)于無限滾動(dòng)輪播：
將圖片排成一行，并將一個(gè)供輪播的窗口固定大小，隱藏超出范圍的圖片，并在第一張圖片前添加復(fù)制的最后一張圖片，在最后一張圖片后添加復(fù)制的第一張圖片，當(dāng)觸發(fā)點(diǎn)擊下一張圖片的事件時(shí)，根據(jù)方向移動(dòng)圖片位置來滾動(dòng)顯示圖片，滾動(dòng)到最后一張圖片或第一張圖片時(shí)，再次滾動(dòng)要跳轉(zhuǎn)到第一張的圖片或最后一張圖片的位置。 - 對(duì)于無限漸進(jìn)漸出的輪播：
所有的圖片都疊放在一起，開始時(shí)統(tǒng)一設(shè)置display:none，然后通過fadeout當(dāng)前頁，fadeIn需要展示的圖片。
其次，需要考慮一些細(xì)節(jié)問題：
- bullets與圖片滾動(dòng)的同步問題。
- 若需要在快速點(diǎn)擊時(shí)，判斷輪播是否處于動(dòng)畫中，就要利用jQuery中的
is(':animated')或者引入isAnimated變量動(dòng)態(tài)判斷。 - 若對(duì)于快速點(diǎn)擊，需要輪播同時(shí)響應(yīng)用戶的點(diǎn)擊，并且不讓用戶等的太久，可以利用jQuery中的stop()函數(shù)。例如：
$node.stop(true).animate()
這樣可以取消當(dāng)前的動(dòng)畫隊(duì)列，從而快速到達(dá)用戶想要的位置。 - 自動(dòng)播放問題，是否添加自動(dòng)播放，當(dāng)用戶鼠標(biāo)放在輪播上時(shí)，取消自動(dòng)播放，提高用戶體驗(yàn)。（注意使用
setTimeout()來模擬setInterval()） - 對(duì)于輪播圖片比較多，可以考慮通過懶加載的方式來節(jié)省流量，提高用戶體驗(yàn)。
完成一個(gè)輪播是，必要的一些函數(shù)接口和變量：
- 變量：
- idx（0）： 始終跟隨當(dāng)前顯示圖片的索引。
- imgCount： 圖片的數(shù)量。
- isAnimated（false）: 當(dāng)前是否處于動(dòng)畫中。
- 函數(shù)：
- autoPlay() 和 stopAuto()
- play(num) 這是最穩(wěn)重要的輪播函數(shù)，num可以是目標(biāo)idx與當(dāng)前所在idx的差值，可正可負(fù)，為正時(shí)，向前滾動(dòng)num個(gè)，為負(fù)時(shí)，向后滾動(dòng)num個(gè)。在這其中，要注意idx的變化與計(jì)算（特別是當(dāng)idx處于最大和最小時(shí)），可以利用：
idx = (idx + num + imgCount) % imgCount（視具體情況而定） - setBullet() 函數(shù)，在play()中被調(diào)用。用來同步bullets（下方小點(diǎn)）的變化。
一些輪播實(shí)例
1
1
1
11
1
11
1
11
1
