思路
第一種思路是：操作DOM結(jié)構(gòu)休傍，第一張圖片想要往前看到末尾滾動過來的圖片時沪悲，先把最后一張圖片放到第一張圖片之前再進(jìn)行滾動，同樣最后一張圖片想向后看下一張（第一張）圖片時提茁，先把第一張圖片當(dāng)?shù)阶詈笠粡垐D片后面再進(jìn)行滾動淹禾。后續(xù)相同情況再操作DOM。
輪播第一種思路.PNG
這樣做的問題時是：輪播下方有對應(yīng)按鈕可點(diǎn)擊直接切換到對應(yīng)的圖片茴扁，如果已經(jīng)改變DOM結(jié)構(gòu)圖片順序铃岔，再點(diǎn)擊下方的直接切換按鈕，導(dǎo)致需要操作的DOM結(jié)構(gòu)圖片可能為多個丹弱，操作偏移過程比較復(fù)雜。
第二種思路是：先把最后一張和第一張 clone 出來铲咨，分別放到第一張前面和最后一張后面躲胳，當(dāng)?shù)谝粡垐D片想要看到末尾滾動過來的圖片時直接進(jìn)行滾動可以看到 clone 的最后一張圖片，此時在滾動完成之后立刻把原來的最后一張圖片調(diào)整到展示窗口位置纤勒，因?yàn)槭峭粡垐D片用戶看不出變化過程坯苹。同樣最后一張圖片往前滾動的原理相同，當(dāng)用戶在最后一張圖片想向后看時直接進(jìn)行滾動看到了 clone 的第一張圖片摇天，此時再把原來的第一張圖片調(diào)整到展示窗口位置粹湃。
文字描述很長看起來有點(diǎn)復(fù)雜恐仑，讓我們結(jié)合圖片理解一下，圖示為第一張圖片想往前滾動的情況
輪播第二種思路.PNG
這樣做就解決了上面出現(xiàn)的問題
功能介紹：
- 左右滑動切換控制：實(shí)現(xiàn)點(diǎn)擊控制向前滑動后者向后滑動圖片的效果为鳄，圖片無限循環(huán)裳仆，可根據(jù)需要傳入不同數(shù)量的圖片
- 底欄圖片位置展示和控制：實(shí)現(xiàn)圖片滑動同步切換，點(diǎn)擊可控制滑動到所選的圖片
- 圖片自動切換：初始化圖片自動滑動切換孤钦，當(dāng)鼠標(biāo)位于輪播上方時歧斟，關(guān)閉自動切換；當(dāng)鼠標(biāo)離開輪播區(qū)域時偏形，打開自動切換
技術(shù)細(xì)節(jié)：
- 面向?qū)ο螅和ㄟ^函數(shù)定義了 ViewPager 類
- 抽象重復(fù)重寫 prototype
- 實(shí)現(xiàn)無限循環(huán)輪播 jQuery 插件
