【Web前端】簡易輪播圖顯示（源代碼+解析+知識點）

一、簡易輪播圖源代碼?

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>簡易輪播圖顯示</title><style type="text/css">*{margin: 0 auto;padding: 0;/* 全局重置邊距 */}p{text-align: center;font-size: 25px;}.imgBox{width: 700px;height: 320px;padding: 0 auto;position: relative;/* 全局重置邊距 */text-align: center;}.box{list-style-type: none;}.img-slide{width: 700px;height: 320px;/* 圖片尺寸與容器一致 */padding: 0 auto;}	#prev,#next{width: 95px;height: 95px;position: absolute;top: 115px;/* 垂直居中 */z-index: 1000;/* 確保在圖片上方 */opacity: 0.2;/* 半透明 */transition: opacity 0.3s; /* 透明度過渡效果 */background-image: url(./left-right.jpg);background-repeat: no-repeat;}#prev{left: 0px;background-position: 0 -80px;}#next{right: 0px;background-position: -165px -80px;}#prev:hover,#next:hover{opacity: 0.7;/* 懸停時更明顯 */}#circlebutton ul{position: absolute;bottom: 20px;/* 固定在底部 */left: 50%;transform: translateX(-50%);/* 精確水平居中 */text-align: center;list-style-type: none;display: flex;/* 彈性布局 */justify-content: center;align-items: center;gap: 10px;/* 項間距 */}#circlebutton ul li{display: flex;justify-content: center;align-items: center;}.divEle{width: 30px;height: 30px;background: rgba(221, 221, 221, 0.7);/* 半透明灰色 */border-radius: 50%;/* 圓形 */text-align: center;display: flex;justify-content: center;align-items: center;/* 文字居中 */cursor: pointer;color: #333;font-size: 14px;font-weight: bold;transition: all 0.3s ease;/* 平滑過渡 */}.divEle.active {background: rgba(255, 0, 0, 0.7);/* 激活狀態紅色 */color: white;transform: scale(1.1);/* 輕微放大 */}</style></head><body><p>簡易輪播圖<p><div class="imgBox"><!-- 左右導航按鈕 --><div id="prev"></div><div id="next"></div><!-- 圖片列表 --><ul class="box"><li><img class="img-slide img1" src="./s1.jpg" alt="1" style="display: block;"></li><li><img class="img-slide img2" src="./s2.jpg" alt="2" style="display: none;"></li><li><img class="img-slide img3" src="./s3.jpg" alt="3" style="display: none;"></li><li><img class="img-slide img4" src="./s4.jpg" alt="4" style="display: none;"></li><li><img class="img-slide img5" src="./s5.jpg" alt="5" style="display: none;"></li></ul><!-- 圓形頁碼指示器 --><div id="circlebutton"><ul><li><div class="divEle active">1</div></li><li><div class="divEle">2</div></li><li><div class="divEle">3</div></li><li><div class="divEle">4</div></li><li><div class="divEle">5</div></li></ul></div></div><script type="text/javascript">window.onload = function() {var index = 0;// 當前圖片索引var divCon = document.getElementsByClassName("divEle");// 所有指示器var imgEle = document.getElementsByClassName("img-slide");// 所有圖片var divPrev = document.getElementById("prev");// 上一張按鈕var divNext = document.getElementById("next");// 下一張按鈕var change1;// 定時器變量// 初始化輪播change1 = setInterval(autoChangeImg, 3000);// 初始化3秒自動切換// 為指示器添加事件for(var i = 0; i < divCon.length; i++) {divCon[i].index = i;// 存儲索引divCon[i].onmouseover = function() {if(index == this.index) {return;// 已是當前則不處理}index = this.index;changeImg();clearInterval(change1);change1 = setInterval(autoChangeImg, 3000);}}function changeImg() {// 重置所有狀態for(var i = 0; i < imgEle.length; i++) {imgEle[i].style.display = 'none';divCon[i].classList.remove("active");}// 設置當前狀態imgEle[index].style.display = 'block';divCon[index].classList.add("active");}function autoChangeImg() {index++;if(index >= imgEle.length) {index = 0;// 循環}changeImg();// 更新顯示}// 上一張按鈕divPrev.onclick = function() {clearInterval(change1);index--;if(index < 0) {index = imgEle.length - 1;}changeImg();change1 = setInterval(autoChangeImg, 3000);};// 下一張按鈕divNext.onclick = function() {clearInterval(change1);index++;if(index >= imgEle.length) {index = 0;}changeImg();change1 = setInterval(autoChangeImg, 3000);};// 鼠標懸停暫停divNext.onmouseover = function() {clearInterval(change1);}divPrev.onmouseover = function() {clearInterval(change1);}// 鼠標離開恢復divPrev.onmouseout = function() {change1 = setInterval(autoChangeImg, 3000);}divNext.onmouseout = function() {change1 = setInterval(autoChangeImg, 3000);}}</script></body>
</html>

二、整體與核心

1.整體結構分析

這個輪播圖包含三個主要部分：

(1)圖片展示區：顯示當前圖片

(2)導航按鈕：左右箭頭切換圖片

(3)頁碼指示器：底部圓形頁碼顯示當前圖片位置

2.核心功能流程

(1)初始化：

①加載第一張圖片

②啟動3秒自動輪播

③第一個指示器顯示為激活狀態

(2)自動輪播：

①每3秒切換到下一張

②更新指示器狀態

③循環播放

(3)用戶交互：

①點擊左右按鈕切換

②點擊指示器跳轉

③懸停導航按鈕暫停

(4)狀態同步：

①圖片顯示與指示器狀態始終保持一致

②任何交互后重置自動輪播計時器

3.輪播圖實現原理

(1)初始化：

默認顯示第一張圖片（display:block），其他隱藏（display:none）。第一個指示器激活（active類）。

(2)自動輪播：

使用setInterval每隔3秒調用一次autoChangeImg函數，將index加1，然后調用changeImg函數更新顯示。

(3)切換圖片函數changeImg：

隱藏所有圖片，移除所有指示器的active類，然后顯示當前索引的圖片并給對應指示器添加active類。

(4)左右按鈕：

點擊時清除定時器，然后改變index（上一張index--，下一張index++），處理邊界（循環），然后更新圖片并重新設置定時器。

(5)指示器：

鼠標懸停時，將index設置為指示器的索引，然后更新圖片，并重置定時器。

(5)鼠標懸停在左右按鈕上時，清除定時器（暫停自動輪播），鼠標移出時重新開始定時器。

三、HTML結構詳解

1. HTML知識點

文檔類型聲明：<!DOCTYPE html>

字符編碼設置：<meta charset="utf-8">

標題：<title>

樣式表：<style>

腳本：<script>

結構元素：<div>, <ul>, <li>, <img>

類名（class）和ID：用于CSS和JS選擇元素

2.HTML結構詳解

<div class="imgBox"><!-- 左右導航按鈕 --><div id="prev"></div><div id="next"></div><!-- 圖片列表 --><ul class="box"><li><img class="img-slide img1" src="./s1.jpg" alt="1" style="display: block;"></li><!-- 其他圖片項 --></ul><!-- 圓形頁碼指示器 --><div id="circlebutton"><ul><li><div class="divEle active">1</div></li><!-- 其他頁碼項 --></ul></div>
</div>

知識點：

div容器：<div>用于組織頁面內容
列表元素：<ul>無序列表和<li>列表項組織圖片和頁碼
圖片元素：<img>標簽顯示圖片
ID和類名：id用于唯一標識元素（如prev,?next）
class用于標識一組元素（如divEle,?img-slide）

四、CSS樣式解析

1. CSS知識點

全局樣式重置：* { margin:0; padding:0; } 清除默認邊距

文本居中：text-align: center

盒模型：width, height, padding

定位：position: relative（相對定位）和position: absolute（絕對定位）結合使用

彈性布局：display: flex, justify-content, align-items

圓角：border-radius: 50% 實現圓形

過渡效果：transition

背景圖片：background-image, background-repeat, background-position

透明度：opacity

層疊順序：z-index

鼠標指針樣式：cursor: pointe

2.CSS樣式解析

(1)全局設置

* {margin: 0 auto;padding: 0;
}

作用：重置所有元素的默認邊距和內邊距
知識點：*是通配符選擇器，選擇頁面所有元素?

(2)輪播圖容器

.imgBox {width: 700px;height: 320px;position: relative;
}

作用：定義輪播圖容器的大小和定位方式
知識點：position: relative設置相對定位，為內部絕對定位元素提供參考

(3)導航按鈕樣式

#prev, #next {width: 95px;height: 95px;position: absolute;top: 115px;z-index: 1000;opacity: 0.2;transition: opacity 0.3s;
}

作用：設置左右按鈕的樣式

知識點：

position: absolute絕對定位，相對于最近的定位祖先元素

z-index控制元素堆疊順序

opacity設置透明度

transition添加透明度變化動畫

(4)頁碼指示器樣式

.divEle {width: 30px;height: 30px;border-radius: 50%;background: rgba(221, 221, 221, 0.7);transition: all 0.3s ease;
}.divEle.active {background: rgba(255, 0, 0, 0.7);color: white;transform: scale(1.1);
}

作用：創建圓形頁碼指示器及其激活狀態

知識點：

border-radius: 50%創建圓形

rgba()設置帶透明度的顏色

transform: scale(1.1)輕微放大效果

.active類表示當前激活狀態

五、JavaScript功能解析

1. JavaScript知識點

事件：window.onload（頁面加載完成時執行）

獲取元素：document.getElementsByClassName, document.getElementById

定時器：setInterval, clearInterval

循環：for循環 - 函數定義和調用

操作CSS樣式：element.style.display, element.classList（添加/移除類）

事件處理：onmouseover, onmouseout, onclick

變量作用域：全局變量和局部變量

2.JavaScript功能解析

(1)初始化變量

var index = 0;
var divCon = document.getElementsByClassName("divEle");
var imgEle = document.getElementsByClassName("img-slide");
var divPrev = document.getElementById("prev");
var divNext = document.getElementById("next");
var change1;

作用：存儲輪播圖狀態和控制元素

知識點：

document.getElementsByClassName()獲取相同類名的元素集合

document.getElementById()通過ID獲取元素

(2)自動輪播功能

change1 = setInterval(autoChangeImg, 3000);function autoChangeImg() {index++;if(index >= imgEle.length) index = 0;changeImg();
}

作用：每3秒自動切換到下一張圖片

知識點：

setInterval()定時執行函數

循環邏輯：當到達最后一張時返回第一張

(3)圖片切換函數

function changeImg() {for(var i = 0; i < imgEle.length; i++) {imgEle[i].style.display = 'none';divCon[i].classList.remove("active");}imgEle[index].style.display = 'block';divCon[index].classList.add("active");
}

作用：更新顯示的圖片和頁碼狀態

知識點：

style.display控制元素顯示/隱藏

classList操作元素的CSS類

add()和remove()添加/移除類

(4)用戶交互功能

// 頁碼指示器交互
divCon[i].onmouseover = function() {// 切換到對應圖片
}// 上一張按鈕
divPrev.onclick = function() {// 切換到上一張
}// 下一張按鈕
divNext.onclick = function() {// 切換到下一張
}// 懸停暫停功能
divPrev.onmouseover = function() { clearInterval(change1); }
divNext.onmouseover = function() { clearInterval(change1); }
divPrev.onmouseout = function() { change1 = setInterval(autoChangeImg, 3000); }
divNext.onmouseout = function() { change1 = setInterval(autoChangeImg, 3000); }

?作用：實現用戶與輪播圖的交互

知識點：

onclick點擊事件

onmouseover鼠標懸停事件

onmouseout鼠標移出事件

clearInterval()清除定時器

六、核心知識點總結

知識點	應用位置	作用
HTML結構	整個文檔	構建頁面骨架
CSS定位	導航按鈕、頁碼	精確控制元素位置
CSS過渡	按鈕透明度、頁碼狀態	創建平滑動畫效果
JavaScript DOM操作	圖片切換、頁碼更新	動態改變頁面內容
事件處理	按鈕點擊、鼠標懸停	響應用戶交互
定時器	自動輪播	實現自動切換功能
循環控制	圖片切換邏輯	實現循環播放