說在前頭

      喜歡並學習前端，一路摸爬滾打過來，現在算算也快滿一年的，每天或多或少都會來“拜讀”大家的寫的文章，學習與感悟了不少，作為一名要變的更強的前端小哥哥，在這個節點上，也想寫點東西，算是完成自己的一個小目標，也是拋磚引玉吧，錯誤或者建議儘管砸過來，反正我頭鐵，嘿嘿。

前因後果 & Code Address

      前幾天，專案需要，自己擼了一個JavaScript圖片輪播，加之又看了不少不用Jquery，直接上JavaScript的文章，也就突發奇想，自己也寫一個JavaScript而不依賴Jquery這樣的前端用的圖片輪播。
      恰好掘金上沒找到類似文章，那麼我來填這個空，JavaScript IE9+ 圖片輪播傳送門，連結地址是前幾天同是掘金上，我釋出分享的我自己的Github Demo地址，因為剛封裝好這個圖片輪播，迫不及待得想分享給大家，所以文章都沒寫就直接上了，現在想想，覺得還是有必要來寫點東西的。

需求&結果

      美麗溫柔大方的UI小姐姐給出的設計上是類似下圖示的輪播，灰底白圓的部分是圖片的索引欄位置，點數量與根據輪播圖數量走的，白色部分都可以視為圖片顯示區域，而灰底部分實際也是透明的，只能看到白圓，為了避免圖片也是白色襯底，白圓也是要加上灰色邊框border的。

那麼來看看實際實現後的效果

細心的你能夠發現其中的功能點有以下

• 1.自動輪播滾動
• 2.支援拖動滾動
• 3.索引點選滾動
• 4.圖片超連結跳轉(這個看不到，但是我加上了)
• 5.切換效果(這個視為隱藏固定需求)

多思路探討

思路原型1

      一般我看到的輪播圖設計原型是將所有圖片作線性排列，使用margin-left或position+left等方法控制,通過改變整體或每個單體元素的偏移值(margin-left或left來實現滾動與切換)實現滾動，但偏移時，整體節點結構不會發生改變，如下圖五彩圖示，黑線框為使用者眼睛實際能看到的地方，這麼做，在初始狀態就要生成所有元素色塊，滾動時，改變 裝載色塊整體 的偏移量的方案比改變 每個色塊 的偏移量的方案要更優，因為後者方案在色塊較多時，js操作的物件更多，效能消耗會更高。

我的思路原型

      我使用3個色塊來裝載圖片，類似左輪手槍，我這隻有3個彈容，每次要看什麼圖片才會裝載進去，初始時，位置“2”裝載第一張圖，位置“3”裝載第二張圖，位置“1”裝載最後一張圖

      偏移後，偏移方向的節點被打出，彈夾滾動，並加入新節點，見下圖，此時位置“1”的內容裝載的是位於位置“3”圖片後的下一張圖片，反向偏移則裝載前一張圖片，若圖片用盡，則按圖片滾動方向確定放入第一張圖片開始或最後一張圖片。

      而我作出以上個人輪播圖設計原型的選擇，是基於輪播圖可拖動的互動+無縫迴圈滾動的想法，按照思路原型1，在首末位置滾動時，勢必要回滾才能到達另一側，當然，有改進方法也可以實現思路原型1的無縫迴圈滾動，但是需要對每個色塊節點進行物件操作，色塊越多，效能就越容易涼涼，但是，如果，輪播圖不需要支援拖動，那麼，思路原型1是不錯的實現方案。

程式碼實現

這部分內容，想了解的小夥伴還是直接去看看吧，都是我自己寫的，喜歡給star噢，英語不好的同學，請使用Chrome右鍵翻譯中文
JavaScript IE9+ 圖片輪播傳送門
程式碼上主要就是

• 1.初始化容器，滾動事件繫結(一定是委託事件監聽!!!)，裝載內容，啟動定時滾動
• 2.拖動事件觸發，暫定定時，拖動事件內方向判斷，是否滾動判斷
• 3.滾動時，操作2個js物件偏移量，加上css translation過渡，實現效果，隨後刪除已不可見的js物件，在另一側新增js節點，判斷圖片當前索引是否需要從頭或尾重新開始並裝載圖片,索引點切換、

突然拋幾個問題

• 1.為啥要用委託事件
• 2.js定時5s就一定是間隔5秒嗎

補充一點,索引點的CSS切換效果是完全基於CSS的translation+width+left實現的，也是從我們們大掘金某個小兄弟那裡得的靈感-不可思議的純CSS導航欄下劃線跟隨效果。

總結

      本JavaScript圖片輪播
      先說缺點，相容性一般，需要IE9+，手機端應該沒問題，但我還沒測試過，而且，滾動時始終要不停操作輪播的節點物件，這點來講，此類圖片輪播的確是...，反正效能是肯定要有所犧牲的，再者，點選索引點切換時，不是相鄰的圖片快速切換(切換圖中在點其他切換)會有縫，有時還很大，頭疼，哎呀呀，反正大家開心就好，現階段暫時不會去優化噢。
      優點...能用...還行...有那麼點意思，行吧，先寫到這。嘿嘿 :P