HTML實現輪播器是Web開發中常見的功能之一。輪播器可以幫助網頁展示多張圖片或內容,并自動切換。以下是一個基本的HTML輪播器代碼:
<div class="slideshow-container"> <!-- Full-width images with number and caption text --> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="img1.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="img2.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="img3.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <!-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>
在以上代碼中,輪播器的核心是通過HTML和JavaScript代碼實現圖像的自動輪播和手動輪播。輪播器的每張圖片被封裝在一個名為"mySlides"的div容器中,并且每個div被標記為"fade"來定義過渡效果。在JavaScript代碼中,plusSlides(n)函數控制圖片的手動切換,而currentSlide(n)函數可以幫助用戶直接跳轉到某一張圖片。