摘要：對(duì)，滑動(dòng)式幻燈片的關(guān)鍵就在于隱藏。在條件里我們添加一個(gè)事件相當(dāng)于滑動(dòng)后的回掉，依賴這個(gè)事件在幻燈片滑動(dòng)執(zhí)行完畢后立即執(zhí)行里面的閃回操作。通過(guò)添加事件監(jiān)聽滑動(dòng)是否結(jié)束從而迅速閃回，達(dá)到貌似無(wú)限滑動(dòng)的效果。

slider輪播組件，在各類網(wǎng)站上出現(xiàn)及其頻繁，有漸隱式的，滑動(dòng)式的等等一系列。
栗子在這:

但我當(dāng)初學(xué)習(xí)寫輪播時(shí)卻被各種入門教程搞得焦頭爛額。不是代碼太復(fù)雜，就是封裝太嚴(yán)重，初學(xué)者很難理清思路，今天我們就寫一個(gè)最基本輪播組件（當(dāng)然功能也要完整），并探尋其中的規(guī)律。

觀察各類輪播組件，我們不難發(fā)現(xiàn)一個(gè)功能完善的組件具備如下幾個(gè)特點(diǎn)：

前進(jìn)后退按鈕控制單張幻燈片

索引按鈕可以直接選擇某張幻燈片

mouseover 可取消滑動(dòng)，mouseout 恢復(fù)滑動(dòng)

部分幻燈片支持無(wú)限滑動(dòng)

支持手勢(shì)操作

今天我們以構(gòu)造一個(gè)最基本的幻燈片組件為出發(fā)點(diǎn)，實(shí)現(xiàn)前4個(gè)特點(diǎn)，只用50行js。

我們本次的幻燈片是滑動(dòng)式幻燈片，觀察不難發(fā)現(xiàn)多張幻燈片其實(shí)是連續(xù)的，但我們卻只能看見一張幻燈片，其它的幻燈片其實(shí)是被隱藏掉了。說(shuō)起隱藏我們想起一個(gè)屬性 overflow：hidden 。對(duì)，滑動(dòng)式幻燈片的關(guān)鍵就在于隱藏?；脽羝嵌鄰埖木拖褚粋€(gè)隊(duì)列一樣，一般都包裹在 ul 標(biāo)簽的 li中，而ul外層的容器（container）--就是我們的視窗，它的寬度一般只有一張幻燈片的大小，再在其上設(shè)置overflow：hidden ，其余的幻燈片便被隱藏掉了。

幻燈片隊(duì)列的寬度是各張幻燈片寬度的總和，他被固定在視窗內(nèi)，我們通過(guò)改變隊(duì)列的 left或 margin-left 便能控制隊(duì)列的位置--哪張幻燈片可以被顯示在視窗中。在js中我們會(huì)設(shè)置一個(gè)全局變量，通過(guò)控制全局變量來(lái)控制幻燈片隊(duì)列的位置。

有了前面兩點(diǎn)的基礎(chǔ)我們就可以搞定一個(gè)普通的滑動(dòng)幻燈片了，但如何讓它無(wú)限滑動(dòng)呢？無(wú)限滾動(dòng)的方案有很多種，但大多較復(fù)雜，我們這次介紹一個(gè)最簡(jiǎn)單方案。原理是這樣的，假如我們有一個(gè)幻燈片隊(duì)列 1 2 3 4，我們克隆前后兩個(gè)幻燈片補(bǔ)充到隊(duì)列中變成 4 1 2 3 4 1 。當(dāng)隊(duì)列運(yùn)動(dòng)到第二個(gè)4，再次滑動(dòng)到第二個(gè)1，然后迅速閃回第一個(gè)1,因?yàn)樗俣葮O快在視覺上我們無(wú)法分辨，便造成了無(wú)限滑動(dòng)的假象。有圖有真相哦。。?

1.我們先克隆第一張和最后一張，放置到隊(duì)列中。

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.這里有四個(gè)操作 （1）. slide 函數(shù)負(fù)責(zé)滑動(dòng)及主要邏輯 （2）. tab 函數(shù)負(fù)責(zé)索引，動(dòng)態(tài)添加類 （3）. 為前后箭頭添加處理邏輯 （4）. 處理鼠標(biāo)操作

3.在 slide 函數(shù)里我們定義一個(gè) cycle 變量，由它來(lái)判斷幻燈片是否應(yīng)該循環(huán)閃回。 由 direction 判斷幻燈片的滑動(dòng)方向，滑動(dòng)前一張為 -1 后一張后 1 ，這里的 direction 默認(rèn)設(shè)置為 1 即正方向，因?yàn)?this 指向的是全局對(duì)象 window ，window 沒有 prev 的 id 。在 cycle 條件里我們添加一個(gè) transitionend 事件相當(dāng)于滑動(dòng)后的回掉，依賴這個(gè)事件在幻燈片滑動(dòng)執(zhí)行完畢后立即執(zhí)行里面的閃回操作。

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 函數(shù)中動(dòng)態(tài)設(shè)置類，并為每個(gè) tab 設(shè)置 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.設(shè)置一個(gè) timer 計(jì)時(shí)器，每3000毫秒調(diào)用一次 slide 函數(shù)

timer = setInterval(slide,3000);

6.最后添加鼠標(biāo)事件，mouseover 取消滑動(dòng)，mouseout 恢復(fù)滑動(dòng)。

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

滑動(dòng)幻燈片的基本邏輯就是這些，主要需要一個(gè)全局變量 current 來(lái)控制滑動(dòng)位置，并通過(guò)一定的限制條件來(lái)重置 current。

通過(guò)添加 transitionend 事件監(jiān)聽滑動(dòng)是否結(jié)束從而迅速閃回，達(dá)到貌似無(wú)限滑動(dòng)的效果。

本文主要以分析一個(gè)幻燈片組件的原理，探尋其中的規(guī)律為主，但是在響應(yīng)式為主的設(shè)計(jì)浪潮下，我依然推薦你在項(xiàng)目中使用那些支持手勢(shì)操作封裝良好的組件。有幾個(gè)出名的插件如下??猜猜哪個(gè)組件需要25美金的證書?。。。

slick 號(hào)稱一旦擁有，今生無(wú)憾的滑動(dòng)組件.....

flickity 一個(gè)功能完善的滑動(dòng)組件 *jqueryfree

lory 也還不錯(cuò)