要實現基礎輪播圖需結合html、css和JavaScript。首先用html搭建結構，外層div容器包含圖片列表，默認第一張顯示；接著用css將圖片疊放并隱藏非active圖片；再通過javascript定時切換active類實現自動播放；最后可添加按鈕實現手動切換。步驟清晰，結構為先，樣式控制顯示，JS實現動態切換，擴展性強。
輪播圖在網頁設計中很常見，尤其用于首頁展示多個圖片或廣告內容。用HTML實現一個基礎的輪播圖（carousel），其實不難，但需要結合一點CSS和JavaScript來完成。
基本結構：用HTML搭框架
先從結構開始。輪播圖本質上是一個容器，里面放幾張圖片，并通過控制顯示哪一張來實現“切換”效果。
<div class="carousel"> <div class="slides"> @@##@@ @@##@@ @@##@@ </div> </div>
上面代碼里，.carousel 是整個輪播區域的外層容器，.slides 包含所有圖片。默認只讓第一張帶 class=”active” 的圖片顯示出來。
立即學習“前端免費學習筆記（深入）”；
樣式控制：用CSS隱藏/顯示圖片
接下來是樣式部分。為了讓輪播圖正常工作，需要把所有圖片疊在一起，只顯示當前激活的那一張。
.carousel { width: 600px; height: 400px; position: relative; overflow: hidden; } .slides img { position: absolute; width: 100%; height: 100%; object-fit: cover; display: none; } .slides img.active { display: block; }
這里的關鍵是用 position: absolute 把圖片堆疊在一起，再通過 .active 類來決定顯示哪一張。
動態切換：加點JS讓它動起來
光有HTML和CSS只能顯示一張圖，要讓它自動切換，就需要JavaScript來定時切換 active 類。
let slides = document.querySelectorAll('.slides img'); let index = 0; function showNextSlide() { slides[index].classList.remove('active'); index = (index + 1) % slides.length; slides[index].classList.add('active'); } setInterval(showNextSlide, 3000); // 每3秒換一張
這段代碼會每隔三秒切換到下一張圖。邏輯很簡單：移除當前 active 類，然后給下一張加上。
可選功能：手動控制左右切換按鈕
如果你希望用戶可以手動點擊左右按鈕來切換圖片，也可以加上按鈕并綁定事件：
<button onclick="prevSlide()">?</button> <button onclick="nextSlide()">?</button>
對應JS：
function nextSlide() { showSlide(index + 1); } function prevSlide() { showSlide(index - 1); } function showSlide(n) { slides[index].classList.remove('active'); index = (n + slides.length) % slides.length; slides[index].classList.add('active'); }
這樣就實現了基本的手動+自動輪播功能。
基本上就這些。雖然看起來有點多，但拆開來看每一步都很清晰。你可以根據需要調整寬度、高度、動畫過渡方式等。比如加個淡入淡出效果，或者指示點（小圓點）來提示當前第幾張圖。不過那些屬于進階功能了。
