一、功能說明
1.1 功能介紹
實現一個漸隱漸現的輪播圖；可以自動切換，也可以滑鼠點選翻頁按鈕或者小圓點進行切換；同時滑鼠移動到圖片上停止自動切換，滑鼠移出圖片恢復自動切換。1.2 效果圖如下
漸隱漸現輪播圖效果
輪播圖預設效果
三、JavaScript程式碼首先，在做我們的輪播效果之前，我們需要先拿到相關的元素。
// 獲取相關容器元素// 輪播圖容器const container = document.querySelector('.container');// 圖片容器const imgs = document.querySelector('.imgs');// 每一張圖片元素const sliderLists = document.querySelectorAll('.slider');// 小圓點容器元素const paginations = document.querySelector('.paginations');// 上翻頁按鈕const prevBtn = document.querySelector('.prev');// 下翻頁按鈕const nextBtn = document.querySelector('.next');至於分頁小圓點按鈕，我個人認為應該根據輪播圖片的數量去動態生成它，因此我是這樣寫的：
// 建立分頁小圓點，首先建立文件片段let frag = document.createDocumentFragment();for (let i = 0; i < sliderLists.length; i++) { const a = document.createElement('a'); a.href = 'javascript:;'; a.class = 'btn'; frag.appendChild(a);}// 將生成的文件碎片掛載到paginations下paginations.appendChild(frag);// 為第一個分頁圓點新增預設樣式paginations.firstElementChild.classList.add('active');分頁圓點元素渲染出來之後，先拿到它所有的元素以備後面做點選切換圖片的事件使用。
let paginationBtns = document.querySelectorAll('.paginations a');由於我做的是漸隱漸現的效果，所以需要控制元素的z-index和opacity兩個屬性的值即可。
實現原理是：哪張圖片顯示，就把該元素的z-index和opacity值都設定成1，把需要隱藏的元素的z-index和opacity值都設定成0即可。這時，就需要兩個值來記錄當前圖片的位置，和上一張圖片的位置。至於自動切換效果，我是利用定時器實現的。
程式碼實現// prev 上一張圖片的位置，curr 當前圖片的位置。預設顯示第一張圖片。let prev = 0, curr = 0;// 自動切換圖片，由於此方法後面還需要再次使用，這裡我就封裝成了一個函式。let autoSwitchImg = function () { // 記錄上一張圖片的索引值，預設從0開始，即：第一張圖片 prev = curr; // 上一張圖片的索引自增1，就是下一張要顯示的圖片，即當前圖片。 curr++; // 判斷當前的索引值是不是大於圖片的總數，大於的話就從0開始，即第一張圖片開始輪播， // 否則繼續向下一張圖片切換。 curr = curr >= sliderLists.length ? 0 : curr; switchImg();};// 利用定時器設定自動輪播，這裡我預設的是3s自動切換。let interval = setInterval(autoSwitchImg, 3000);這裡有一點需要注意的是：自動切換函式autoSwitchImg()一定在寫在定時器之前，否則會報錯。
分頁圓點bug
分頁小圓點的實現原理是：我們先利用上面拿到的小圓點元素，用forEach()去遍歷每一個元素，如果當前圖片的位置索引等於小圓點的位置索引（curr === index），那麼就給這個圓點新增上一個active類實現切換效果。值得注意的是，我們拿到的小圓點的元素是一個NodeList類陣列，需要先轉換成陣列再使用。具體請看下面的程式碼實現。
程式碼實現// 讓分頁按鈕跟圖片索引對應let switchPaginateBtn = function () { Array.from(paginationBtns).forEach((item, index) => { curr === index ? item.className = 'active' : item.className = ''; });};這樣就可以實現圖片和圓點切換一致地進行了。
以上是自動切換圖片的功能，如果我們想實現滑鼠移入輪播海報上停止自動切換，滑鼠移除再恢復自動切換應該怎麼辦呢？可以利用滑鼠移入(onmouseenter)、移出(onmouseleave)事件進行操作。
程式碼實現// 滑鼠移入輪播區域取消自動輪播container.addEventListener('mouseenter', () => { clearInterval(interval); interval = null;});// 滑鼠移出輪播區域開始自動輪播container.addEventListener('mouseleave', () => { interval = setInterval(autoSwitchImg, 3000);});截止到目前為止，上面的程式碼已經實現了圖片的漸隱漸現效果，以及滑鼠滑入滑出暫停和恢復切換的效果。下面需要做的就是實現手動點選切換事件。
// 上一頁prevBtn.addEventListener('click', () => { // 儲存當前圖片的索引 prev = curr; // 上一張圖片就是當前圖片的索引值-1 curr--; curr = curr < 0 ? sliderLists.length - 1 : curr; switchImg();});下一頁翻頁按鈕與自動切換圖片的邏輯完全一樣，只需要呼叫一下自動切換的邏輯即可
// 下一頁nextBtn.addEventListener('click', () => { autoSwitchImg();});透過給翻頁按鈕新增以上兩個點選事件，已經完成了點選切換圖片的功能了，下面再聊一聊如何透過點選分頁小圓點切換圖片的功能。
程式碼實現// 點選分頁小圓點切換圖片Array.from(paginationBtns).forEach((item, index) => { item.addEventListener('click', () => { // 儲存當前圖片的位置索引 prev = curr; // 將當前點選的小圓點的位置索引值賦值給的需要顯示的圖片變數 curr = index; // 呼叫切換圖片函式，實現切換效果 switchImg(); });});以上就是我寫這個漸隱漸現輪播圖的全部過程，如果有寫得不好的地方，請各位大佬批評指正，如果有跟我一樣的初學者想看完整程式碼的同學，可以關注私信我並回復“輪播”獲取原始碼。