看視訊課太困了~來寫篇文章醒醒困.....
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
主要實作的是PC端的輪播（移動端的輪播應該還要實作拖拽功能），主要實作了以下功能：
- 自動循環輪播
- 滑鼠進入停止輪播，滑鼠移出開始自動輪播
- 點選上一張/下一張
- 點選輪播圖底部的圓點實作圖檔的切換
源代碼貼在文章末尾
思路：
其實之前也有跟着視訊教程寫過，并且在打算要寫輪播圖前還在網上看了點資料，大多數人還是通過多添加一張圖檔的方式來實作輪播。我呢，完全跟着自己的感覺走，沒有多添加一張圖檔，在寫輪播的過程中也遇到了各種Bug，好在耐心的去找原因并解決。其中最讓我抓狂的就是循環輪播不銜接的問題。
我大體的思路主要是根據要實作的功能來的，比如：
- 自動輪播封裝了一個autoSwiper函數；
- 滑鼠進入/移出封裝了handleMouseEvent函數；
- 點選上一張/下一張封裝了handleClickEvent函數；
- 點選輪播圖底部的圓點實作圖檔的切換封裝了handleClickIcon函數
這樣封裝的好處就是代碼看起來更清晰，思路更明确，不會感覺一團糟的感覺。要實作以上功能，這個函數之間聯系也十分緊密，比如autoSwiper函數可以正常實作，但是當執行了handleClickIcon函數後，可能會導緻autoSwiper報錯，是以十分謹慎的處理函數之間的公共變量。與這幾個函數聯系緊密的主要是
swiperWidth(所有圖檔的寬度)，
startPosition(swiper目前的位置)，
swiperleft(swiper的left值);
現在具體介紹下具體的實作：
首先是HTML結構，有一點要十分注意，
ul必須使用絕對定位(postion：absolute)，後續的操作都是通過doc.style.left來改變其位置的。
<
然後重點介紹下swiper.js（所有的業務邏輯都在這裡）：
剛開始要把需要用到的DOM元素擷取到：
// 擷取元素
接着要進行初始化操作：
// 初始化設定
上面的準備工作做好後就可以開始功能的實作了，先來實作自動輪播的功能。毫無疑問，這裡必須要用到setInterval了，我還是先放代碼吧：
// 實作自動輪播
我覺得我這裡做了一件十分愚蠢的事情，就是把startPosition設定為正值了，導緻我後面出現好多Bug，時間原因我就沒有再去重構了，總之我建議使用真實的left值。
這個函數其實就做了三件事：
- 每次輪播前都必須把所有圓點激活樣式清空；
- 自動輪播。自動輪播其實很好了解，難點在循環輪播；
- 循環輪播。判斷是否輪播的依據為postion的值，當postion不符合條件時進行循環輪播，但是直接這樣會出現個小Bug，就是輪播到第一張，再到第二張時候，間隔時間變長了，變為2s了，這是因為它執行了兩次，是以我設定了一個中間變量isLoop，當isLoop為true時直接讓它從第二張開始輪播。
接着是滑鼠進入和移出的實作，這個功能主要用的是事件委托，比較簡單就不再多說：
// 滑鼠進入停止輪播/移出開始輪播
然後是點選上一張/下一張。這裡也要注意每次點選的時候要清除圓點的激活樣式，還有循環輪播的問題。這裡就是！！！特别要注意startPosition 的正負，這個值還會影響函數autoSwiper。
// 點選上一張/下一張
最後就是點選圓點切換圖檔了，這個也比較簡單，不多說：
// 點選icon切換輪播圖
總結：
其實，這個輪播圖做的比較簡單，沒有什麼動畫效果，我覺得js裡面制作動畫效果可能是自己的一塊短闆，其次呢，代碼不夠簡潔，比較備援，再接再厲吧~
最後附上我的源代碼，需要的可以去我的GitHub上clone！有什麼建議也可以提~
https://github.com/ZhipengYang0605/Swiper-JSgithub.com