50行代碼搞定無限滑動幻燈片

slider輪播組件，在各種網站上出現及其頻繁，有漸隱式的，滑動式的等等一系列。
栗子在這:

但我當初學習寫輪播時卻被各類入門教程搞得焦頭爛額。不是代碼太複雜，就是封裝太嚴重，初學者很難理清思路，今天咱們就寫一個最基本輪播組件（固然功能也要完整），並探尋其中的規律。

觀察各種輪播組件，咱們不難發現一個功能完善的組件具有以下幾個特色：

1. 前進後退按鈕控制單張幻燈片

2. 索引按鈕能夠直接選擇某張幻燈片

3. mouseover 可取消滑動，mouseout 恢復滑動

4. 部分幻燈片支持無限滑動

5. 支持手勢操做

今天咱們以構造一個最基本的幻燈片組件爲出發點，實現前4個特色，只用50行js。

通常原理

咱們本次的幻燈片是滑動式幻燈片，觀察不難發現多張幻燈片實際上是連續的，但咱們卻只能看見一張幻燈片，其它的幻燈片實際上是被隱藏掉了。提及隱藏咱們想起一個屬性 overflow：hidden 。對，滑動式幻燈片的關鍵就在於隱藏。幻燈片是多張的就像一個隊列同樣，通常都包裹在 ul 標籤的 li中，而ul外層的容器（container）--就是咱們的視窗，它的寬度通常只有一張幻燈片的大小，再在其上設置overflow：hidden ，其他的幻燈片便被隱藏掉了。

幻燈片隊列的寬度是各張幻燈片寬度的總和，他被固定在視窗內，咱們經過改變隊列的 left或 margin-left 便能控制隊列的位置--哪張幻燈片能夠被顯示在視窗中。在js中咱們會設置一個全局變量，經過控制全局變量來控制幻燈片隊列的位置。

有了前面兩點的基礎咱們就能夠搞定一個普通的滑動幻燈片了，但如何讓它無限滑動呢？無限滾動的方案有不少種，但大多較複雜，咱們此次介紹一個最簡單方案。原理是這樣的，假如咱們有一個幻燈片隊列 1 2 3 4，咱們克隆先後兩個幻燈片補充到隊列中變成 4 1 2 3 4 1 。當隊列運動到第二個4，再次滑動到第二個1，而後迅速閃回第一個1,由於速度極快在視覺上咱們沒法分辨，便形成了無限滑動的假象。有圖有真相哦。。?

js控制邏輯

1.咱們先克隆第一張和最後一張，放置到隊列中。

const first_slide = slide_items[0].cloneNode(true);
const last_slide = slide_items[slide_items.length-1].cloneNode(true);
slide_list.insertBefore(last_slide, slide_items[0]);
slide_list.appendChild(first_slide);

2.這裏有四個操做 （1）. slide 函數負責滑動及主要邏輯 （2）. tab 函數負責索引，動態添加類 （3）. 爲先後箭頭添加處理邏輯 （4）. 處理鼠標操做

3.在 slide 函數裏咱們定義一個 cycle 變量，由它來判斷幻燈片是否應該循環閃回。 由 direction 判斷幻燈片的滑動方向，滑動前一張爲 -1 後一張後 1 ，這裏的 direction 默認設置爲 1 即正方向，由於 this 指向的是全局對象 window ，window 沒有 prev 的 id 。在 cycle 條件裏咱們添加一個 transitionend 事件至關於滑動後的回掉，依賴這個事件在幻燈片滑動執行完畢後當即執行裏面的閃回操做。

function slide() {
  let cycle = false;
  const direction = (this.id == 'prev')? -1: 1;
  current += direction;
  slide_list.style.left = -4*current + '00px';
  slide_list.style.transition = 'left 0.5s';
  cycle = !!(current == 0 || current > len);
  if (cycle) {
    current = (current === 0)? len : 1;
    slide_list.addEventListener("transitionend", function() {
    slide_list.style.left = -4*current + '00px';
    slide_list.style.transition = 'left 0s';
    })
  }
  tab(current-1);
}

4.在 tab 函數中動態設置類，併爲每一個 tab 設置 click 事件。

function tab(i) {
  slide_dots_items.forEach(function(i){ i.classList.remove('current')});
  slide_dots_items[i].classList.add('current');
}
slide_dots_items.forEach(function(i) {
  i.addEventListener('click', function() {
    current = [...slide_dots_items].indexOf(i);
    slide();
  })
});

5.設置一個 timer 計時器，每3000毫秒調用一次 slide 函數

timer = setInterval(slide,3000);

6.最後添加鼠標事件，mouseover 取消滑動，mouseout 恢復滑動。

container.onmouseover = function (){
  clearInterval(timer);
};
container.onmouseout = function (){
  timer = setInterval(slide,3000);
};

總結

滑動幻燈片的基本邏輯就是這些，主要須要一個全局變量 current 來控制滑動位置，並經過必定的限制條件來重置 current。

經過添加 transitionend 事件監聽滑動是否結束從而迅速閃回，達到貌似無限滑動的效果。

本文主要以分析一個幻燈片組件的原理，探尋其中的規律爲主，可是在響應式爲主的設計浪潮下，我依然推薦你在項目中使用那些支持手勢操做封裝良好的組件。有幾個出名的插件以下⛄️猜猜哪一個組件須要25美金的證書?。。。

1. slick 號稱一旦擁有，此生無憾的滑動組件.....

2. flickity 一個功能完善的滑動組件 *jqueryfree

3. lory 也還不錯