HTML是一種標記語言，用于將文本、圖像和其他內容以結構化方式呈現在網頁上。循環切換是一種常用的網站設計元素，能夠增強用戶體驗并吸引更多的訪問者。在本文中，我們將介紹如何在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="image1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="image2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="image3.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>

以上的代碼創建了一個圖片輪播器，包含三張圖片和相應的標題。這個輪播器具有兩個按鈕，讓用戶循環切換到下一張或上一張圖片。下面解釋一下這段代碼的結構：

• <div class="slideshow-container">：一個帶有“slideshow-container”類的盒子，其中包含幻燈片的所有元素。
• <div class="mySlides fade">：帶有“mySlides fade”類的幻燈片DIV。將此類應用于每個幻燈片，以顯示它們的圖像和文本。
• <div class="numbertext">：一個顯示當前圖片編號的DIV。
• <div class="text">：一個顯示圖片標題的DIV。
• <img src="...">：包含要顯示的圖像的IMG元素。
• <a class="prev">和<a class="next">：兩個鏈接元素，用于控制循環切換。它們分別將調用plusSlides(-1)和plusSlides(1)，以循環切換到當前圖片的前一張或下一張。

上述代碼設置了一個簡單的循環切換效果，用戶可以點擊按鈕輕松地瀏覽所有幻燈片。你可以根據自己的需要進行調整和修改，以滿足你的網站設計需求。