HTML 輪播圖純代碼 HTML 是網頁設計中最為基礎的語言，用于頁面結構的構建，我們可以使用它實現許多實用的功能，如輪播圖。在本文中，我們將介紹如何使用 HTML 編寫一個簡單的輪播圖，希望為大家提供幫助。 首先，我們需要使用以下代碼來創建一個包含輪播圖的容器：

<div id="slider">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>

該代碼創建了一個 id 為 "slider" 的 div 容器，其中包含了三個 img 標簽。這些 img 標簽將是我們輪播圖中的圖片。現在，我們需要使用 CSS 對容器進行樣式設置。

#slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
#slider img {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
}
#slider img.active {
opacity: 1;
}

上述代碼將容器設置為全屏寬度，高度為 500 像素。overflow 屬性設置為 hidden，以隱藏超出容器的任何內容。 img 標簽的位置設置為絕對，并使用 opacity 屬性為 0 和 transition 屬性為 1 秒來實現淡入淡出效果。最后，使用 .active 類將當前的圖片設置為不透明。 現在，我們需要使用 JavaScript 來實現輪播功能。簡單的 JavaScript 代碼可如下：

var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByTagName("img");
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].classList.add("active");
setTimeout(showSlides, 3000);
}

該代碼使用 slideIndex 變量來跟蹤當前顯示的幻燈片，然后使用 showSlides 函數來遞歸地循環顯示幻燈片。它使用 getElementsByTagName() 方法獲取容器中的所有圖片，一次將類 “active” 從每個圖片中刪除，通過添加 “active” 類到下一個輪播元素來循環播放幻燈片。 在這些簡單的 HTML、CSS 和 JavaScript 代碼的幫助下，我們可以輕松地創建一個幻燈片，可以在網站上展示圖片、視覺效果，并傳達信息。