導讀:建站文章建站文章輪播圖是現代網頁設計中常用的元素之一。它可以吸引用戶的注意力，展示最重要的信息，同時也可以提高頁面的可用性和用戶體驗。在本篇文章中，我們將學習如何使用HTML、網站建設教程網站seo優化培訓。

輪播圖是現代網頁設計中常用的元素之一。它可以吸引用戶的注意力，展示最重要的信息，同時也可以提高頁面的可用性和用戶體驗。

在本篇文章中，我們將學習如何使用 HTML、CSS 和 JavaScript 創建一個簡單而漂亮的主輪播圖。我們將涵蓋以下主題：

HTML 結構

CSS 樣式

JavaScript 動畫效果

1. HTML 結構

首先，讓我們來看一下輪播圖的 HTML 結構。我們需要一個容器 <div> 來包含整個輪播圖，每張圖片需要一個 <img> 元素，還需要一些導航按鈕來切換圖片。

<div class="slider"> <img src="image1.jpg" alt="Image 1" /> <img src="image2.jpg" alt="Image 2" /> <img src="image3.jpg" alt="Image 3" /> <button class="prev">Previous</button> <button class="next">Next</button> </div>

2. CSS 樣式

接下來，我們需要為輪播圖添加 CSS 樣式。我們將使用 flexbox 布局來使圖片水平居中，并將導航按鈕放在輪播圖底部。

.slider { display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .slider img { width: 100%; height: 100%; object-fit: cover; } .prev, .next { position: absolute; bottom: 10px; padding: 8px 16px; background-color: #333; color: white; border: none; cursor: pointer; } .prev { left: 10px; } .next { right: 10px; }

3. JavaScript 動畫效果

最后，我們需要為輪播圖添加 JavaScript 動畫效果。我們將使用一個計時器來自動輪播圖片，并為導航按鈕添加事件監聽器。

const slider = document.querySelector(".slider"); const prevBtn = slider.querySelector(".prev"); const nextBtn = slider.querySelector(".next"); const slides = slider.querySelectorAll("img"); let currentSlide = 0; let timer; function showSlide(n) { slides[currentSlide].classList.remove("active"); slides[n].classList.add("active"); currentSlide = n; } function autoSlide() { if (currentSlide === slides.length - 1) { showSlide(0); } else { showSlide(currentSlide + 1); } } prevBtn.addEventListener("click", () => { if (currentSlide === 0) { showSlide(slides.length - 1); } else { showSlide(currentSlide - 1); } }); nextBtn.addEventListener("click", () => { if (currentSlide === slides.length - 1) { showSlide(0); } else { showSlide(currentSlide + 1); } }); timer = setInterval(autoSlide, 3000);

現在，我們已經完成了主輪播圖的制作！您可以在以下代碼片段中查看完整的 HTML、CSS 和 JavaScript 代碼。

關鍵詞標簽: 建站 主圖輪播