《HTML + CSS + JS 打造炫酷輪播圖詳解》

一、項目概述

本次項目旨在使用 HTML、CSS 和 JavaScript 實現一個具有基本功能的輪播圖，包括圖片自動輪播、上一張 / 下一張按鈕切換、小圓點指示與切換等功能，以提升網頁的交互性和視覺吸引力。

二、實現步驟

（一）圖片拼接做出架構

1、HTML 結構搭建

在 HTML 文件中，首先創建一個 div 容器，設置 id 為 banner，作為輪播圖的整體框架。
在 banner 內部，創建一個無序列表 ul，id 為 list，用于存放輪播的圖片。每個圖片項為 li 元素，li 內部嵌套 img 標簽引入圖片資源，如：

<div id="banner"><ul id="list"><li><img src="./img/p2.jpg"></li><li><img src="./img/p3.jpg"></li><li><img src="./img/p2 - 副本.jpg"></li><li><img src="./img/p3 - 副本.jpg"></li><li><img src="./img/p2.jpg"></li></ul>
</div>

接著創建另一個無序列表 ul，id 為 icolist，用于存放小圓點，每個小圓點為 li 元素，初始內容為數字序號，用于標識對應的圖片：

<ul id="icolist"><li>1</li><li>2</li><li>3</li><li>4</li>
</ul>

最后，創建兩個 div 元素，分別作為向前和向后的按鈕，設置 id 為 pre 和 nex，并添加相應的箭頭符號作為內容：

<div class="prev" id="pre">《</div>
<div class="next" id="nex">》</div>

2、CSS 樣式設置

使用通配符選擇器 * 對所有元素進行初始化，去除默認的 margin、padding 和列表樣式：

* {margin: 0;padding: 0;list-style: none;
}

對 banner 容器設置寬度 650px、高度 250px，添加 2px 灰色邊框，設置相對定位 position: relative，并隱藏超出部分 overflow: hidden，使其水平居中 margin:100px auto 0;：

#banner {width: 650px;height: 250px;border: 2px solid #999;position: relative;overflow: hidden;margin:100px auto 0;
}

對于圖片列表 #list，設置寬度 3500px（考慮到圖片數量和切換效果，確保足夠寬度容納所有圖片移動），高度 250px，使其內部的 li 元素左浮動 float: left，圖片寬度 700px、高度 250px 以適應容器：

#list {width: 3500px;height: 250px;
}
#list li {float: left;
}
#list li img {width: 700px;height: 250px;
}

向前按鈕 .prev 和向后按鈕 .next，設置寬度 30px、高度 40px，背景色為灰色 #999，文字顏色白色 color: aliceblue，水平垂直居中 text-align: center; line-height: 40px，絕對定位在容器底部左右兩側合適位置，設置 cursor: pointer 以顯示手型指針：

.prev{width:30px;height:40px;background-color: #999;color: aliceblue;text-align: center;line-height: 40px;position:absolute;bottom:45%;left:5px;cursor: pointer;
}
.next{width:30px;height:40px;background-color: #999;color: aliceblue;text-align: center;line-height: 40px;position:absolute;bottom:45%;right:5px;cursor: pointer;
}

小圓點 #icolist 列表設置絕對定位在容器右下角，li 元素設置寬度 30px、高度 30px，圓形 border-radius: 50%，灰色背景 background: #999，白色文字 color: #fff，水平垂直居中，左浮動并設置一定間距 margin-left: 5px，同樣設置 cursor: pointer：

#icolist {position: absolute;right:10px;bottom: 10px;
}
#icolist li{width:30px;height:30px;border-radius: 50%;background: #999;color: #fff;text-align: center;line-height: 30px;float: left;margin-left: 5px;cursor: pointer;
}

（二）定時器實現簡單輪播效果

1、在 JavaScript 代碼中，首先等待頁面加載完成，使用 window.onload 事件：

window.onload = function() {// 后續代碼將寫在此處
}

2、在 window.onload 函數內部，獲取圖片列表元素 eimglist 和用于控制輪播的變量 left（初始為 0，表示圖片列表的初始偏移量），并定義定時器相關變量 timer：

var eimglist = document.querySelector('#list');
var left = 0;
var timer;

3、創建run函數，用于實現圖片的自動輪播邏輯：

首先判斷如果圖片向左滾動到最后一張（即 left < -2800，因為每張圖片寬度 700px，共 4 張圖片循環，總偏移量為 -2800px），則將 left 重置為 0，實現循環效果：

if (left < -2800) {left = 0;
}

計算當前顯示圖片的序號 m，通過 Math.floor(-left/700)，取整得到當前圖片是第幾張：

var m = Math.floor(-left/700);

處理圖片滾動時的特殊情況，當圖片剛好滾動完一輪（即 left % 700 == 0），設置一個較小的偏移量 n = 1200，模擬快速切換到下一輪第一張圖片的效果，否則設置常規偏移量 n = 10：

var n = (left % 700 == 0)? n = 1200 : n = 10;

更新圖片列表的 marginLeft 屬性，實現圖片向左移動：

left -= 10;
list.style.marginLeft = left + 'px'

使用 setTimeout 遞歸調用 run 函數，實現定時輪播，間隔時間為 n 毫秒：

timer = setTimeout(run,n);

（三）做出上一張下一張按鈕

（此時 banner 中 overflow:hidden 需要先注釋掉，要不然看不到那兩個按鈕），此時這個要做決定定位，并給他們添加點擊事件)

1、在 CSS 中，由于按鈕默認被 overflow:hidden 隱藏，暫時注釋掉 banner 容器的 overflow:hidden 屬性，以便能看到按鈕并調整位置：

/* #banner {overflow: hidden;
} */

2、在 JavaScript 中，獲取向前按鈕 prev_btn 和向后按鈕 next_btn：

var prev_btn = document.getElementById('pre');
var next_btn = document.getElementById('nex');

3、給向前按鈕添加點擊事件處理函數：

計算當前圖片的上一張圖片序號 prevgo，通過 Math.floor(-left/700)+1，并處理邊界情況，當 prevgo == 0（即已經是第一張圖片，點擊上一張應切換到最后一張），將 prevgo 設置為 3：

prev_btn.onclick = function() {let prevgo = Math.floor(-left/700)+1;if(prevgo == 0) {prevgo = 3;}// 后續調用圖片定位函數
}

4、給向后按鈕添加點擊事件處理函數：

類似地，計算當前圖片的下一張圖片序號 nextgo，通過 Math.floor(-left/700)+1，并處理邊界情況，當 nextgo == 4（即已經是最后一張圖片，點擊下一張應切換到第一張），將 nextgo 設置為 0：

next_btn.onclick = function() {let nextgo = Math.floor(-left/700)+1;if(nextgo == 4) {nextgo = 0;}// 后續調用圖片定位函數
}

（四）實現上一張下一張代碼

我們做一個 imgchange() 圖片定位函數

1、在 JavaScript 中，創建imgchange函數：

函數接收一個參數 n，表示要切換到的圖片序號，根據序號計算圖片列表需要的偏移量 lt，通過 -(n*700)，并更新圖片列表的 marginLeft 屬性，同時更新全局變量 left：

function imgchange(n) {let lt = -(n*700);list.style.marginLeft = lt + 'px';left = lt;
}

2、在向前按鈕和向后按鈕的點擊事件處理函數中，分別調用 imgchange 函數傳入計算好的 prevgo 和 nextgo：

prev_btn.onclick = function() {let prevgo = Math.floor(-left/700)+1;if(prevgo == 0) {prevgo = 3;}imgchange(prevgo);
}
next_btn.onclick = function() {let nextgo = Math.floor(-left/700)+1;if(nextgo == 4) {nextgo = 0;}imgchange(nextgo);
}

（五）做出輪播圖上的四個小圓點

1、在 HTML 結構中的 #icolist 列表已經創建了四個 li 元素作為小圓點，初始內容為數字 1 - 4，用于標識圖片序號。

2、在 CSS 樣式中，已經對 #icolist 及其內部 li 元素進行了樣式設置，使其呈現為圓形、灰色背景、白色文字并在輪播圖右下角合理排列，且鼠標懸停時有手型指針效果。

（六）小圓點跟著圖片滾動變紅，做一個 `icochange()` 圓點跟隨函數

1、在 JavaScript 中，創建icochange函數：

首先使用 for 循環遍歷所有小圓點 esico（通過 document.getElementById('icolist').getElementsByTagName('li') 獲取），將它們的背景色清空：

function icochange(m) {for(let index = 0; index < esico.length; index++) {esico[index].style.backgroundColor = '';}

然后根據傳入的當前圖片序號 m，判斷如果 m 小于小圓點數量 esico.length，將對應序號的小圓點背景色設置為紅色：

if(m < esico.length) {esico[m].style.backgroundColor = 'red';
}
}

2、在 run 函數中，每次圖片切換時調用 icochange 函數傳入當前圖片序號 m，實現小圓點跟隨圖片變色：

function run() {// 其他代碼...icochange(m);// 其他代碼...
}

（七）點擊小圓點切圖，完成最終效果

1、在 JavaScript 中，給小圓點列表eicolist

添加點擊事件處理函數：

獲取點擊的目標元素 tg，通過 event.target，并從目標元素的 innerHTML 中獲取點擊的小圓點序號 ico，注意要減 1 以匹配圖片序號（因為小圓點內容從 1 開始，而圖片序號從 0 開始）：

eicolist.onclick = function () {var tg = event.target;var ico = tg.innerHTML - 1;// 后續調用圖片定位和小圓點變色函數
}

2、在點擊事件處理函數中，分別調用 imgchange 函數傳入 ico 實現圖片切換，調用 icochange 函數傳入 ico 實現對應小圓點變色：

eicolist.onclick = function () {var tg = event.target;var ico = tg.innerHTML - 1;imgchange(ico);icochange(ico);
}

3、最后，為了優化用戶體驗，當鼠標懸停在圖片列表上時，停止輪播，移開后繼續輪播：

給圖片列表 eimglist 添加 onmouseover 事件處理函數，在其中使用 clearTimeout 停止定時器：

eimglist.onmouseover = function() {clearTimeout(timer);
}

給圖片列表 eimglist 添加 onmouseout 事件處理函數，在其中調用 run 函數重新啟動輪播：

eimglist.onmouseout = function() {run();
}

三、全部代碼

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}#banner {width: 650px;height: 250px;border: 2px solid #999;position: relative;overflow: hidden;margin:100px auto 0;}/* 輪播圖列表圖片 */#list {width: 3500px;height: 250px;}#list li {float: left;}#list li img {width: 700px;height: 250px;}/* 向前的按鈕 */.prev{width:30px;height:40px;background-color: #999;color: aliceblue;text-align: center;line-height: 40px;position:absolute;bottom:45%;left:5px;cursor: pointer;}/* 向后按鈕 */.next{width:30px;height:40px;background-color: #999;color: aliceblue;text-align: center;line-height: 40px;position:absolute;bottom:45%;right:5px;cursor: pointer;}/* 小圓點 */#icolist{position: absolute;right:10px;bottom: 10px;}#icolist li{width:30px;height:30px;border-radius: 50%;background: #999;color: #fff;text-align: center;line-height: 30px;float: left;margin-left: 5px;cursor: pointer;}</style><script>window.onload = function() {var prev_btn=document.getElementById('pre')var next_btn=document.getElementById('nex')// 獲取小圓點的li標簽var esico=document.getElementById('icolist').getElementsByTagName('li');var eicolist=document.querySelector('#icolist');// 獲取圖片列表元素var eimglist=document.querySelector('#list');var left = 0;var timer;run()function run() {// 如果滾動完，重新開始if (left < -2800) {left = 0;}// 常見變量m獲取當前圖片序號var m=Math.floor(-left/700);// 此時輪播圖尾部有一張空白，我們需要補接第一張才不會有空，我們添加一張圖片，修改圖片列表寬度var n = (left % 700== 0) ? n = 1200 : n = 10;left -= 10;list.style.marginLeft = left + 'px'timer = setTimeout(run,n);// 調用icochange進行小圓點變化icochange(m);}// 我們做一個圖片定位函數function imgchange(n){let lt=-(n*700);list.style.marginLeft=lt+'px';left=lt;}prev_btn.onclick=function(){let prevgo=Math.floor(-left/700)+1;if(prevgo==0){prevgo=3;}imgchange(prevgo)}next_btn.onclick=function(){let nextgo=Math.floor(-left/700)+1;if(nextgo==4){nextgo=0;}imgchange(nextgo)}// icochange()圓點跟隨函數function icochange(m){// 通過for循環所有li元素背景色清空for(let index=0;index<esico.length;index++){esico[index].style.backgroundColor='';}// 當圖片所在的小圓點設置背景色為紅色if(m<esico.length){esico[m].style.backgroundColor='red';}}// 創建列表元素點擊事件eicolist.onclick=function (){// tg獲取事件目標元素var tg=event.target;// 通過ico獲取點擊的序號var ico=tg.innerHTML-1;imgchange(ico);icochange(ico);}// 鼠標在圖片列表上時輪播停止，移開后又啟動eimglist.onmouseover=function(){clearTimeout(timer);}eimglist.onmouseout=function(){run();}}</script></head><body><div id="banner"><ul id="list"><li><img src="./img/p2.jpg"></li><li><img src="./img/p3.jpg"></li><li><img src="./img/p2 - 副本.jpg"></li><li><img src="./img/p3 - 副本.jpg"></li><li><img src="./img/p2.jpg"></li></ul><!-- 小圓點 --><ul id="icolist"><li>1</li><li>2</li><li>3</li><li>4</li></ul><!-- 向前向后按鈕 --><div class="prev" id="pre">《</div><div class="next" id="nex">》</div></div></body>
</html>

四、總結

通過以上步驟，逐步構建了一個完整的輪播圖功能。從最初的 HTML 結構搭建，到 CSS 樣式美化，再到 JavaScript 實現復雜的交互邏輯，包括定時器控制自動輪播、按鈕點擊切換、小圓點指示與交互等。在實現過程中，需要注意變量的管理、邊界情況的處理以及元素的樣式和定位協調，以確保輪播圖的流暢運行和良好展示效果。同時，這種實現方式也為進一步擴展輪播圖功能，如添加動畫效果、響應式設計等提供了基礎。