今天我們來學習如何使用html實現一個焦點圖輪播效果。 首先，我們需要在頁面中添加一個容器，用于顯示輪播圖，如下所示：

<div class="carousel-container">
<img src="img/slide1.jpg" alt="slide1">
<img src="img/slide2.jpg" alt="slide2">
<img src="img/slide3.jpg" alt="slide3">
</div>

在這里我們使用了三張圖片作為我們的輪播圖，分別是slide1.jpg、slide2.jpg、slide3.jpg。將這些圖片都放在同一個容器中，并設置寬度和高度，我們就實現了一個最基礎的輪播效果。 下面我們來添加一些樣式，讓我們的輪播圖看起來更加美觀。

<style>
.carousel-container {
width: 600px;
height: 300px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.carousel-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel-container img.active {
opacity: 1;
}
</style>

我們使用了一些基本的CSS樣式來設置輪播圖容器和圖片。我們設置了容器的寬度和高度，并將其設置為相對定位。我們也設置了圖片的定位方式和寬度、高度，使它們鋪滿整個容器。我們用opacity屬性來設置圖片的透明度，初始值為0，使其不可見。最后我們添加了一個active類，用于控制當前輪播圖片的透明度為1。 現在，我們需要使用JavaScript代碼來實現圖片輪播。我們將使用setInterval()函數來實現輪播效果。我們將在每5秒鐘調用一次updateCarousel()函數，并將當前圖片的active類移除，并添加到下一張圖片上。

<script>
var carousel = document.querySelector('.carousel-container');
var images = carousel.querySelectorAll('img');
var currentIndex = 0;
var interval;
function updateCarousel() {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}
interval = setInterval(updateCarousel, 5000);
</script>

我們首先用querySelector()函數來獲取我們的輪播容器和所有的圖片。 currentIndex變量用于跟蹤當前顯示的圖片。我們創建了一個名為updateCarousel()的函數來實現圖片的更新。我們首先刪除當前顯示的圖片的active類，并將當前索引改為下一張圖片的索引。我們使用模運算符(%)在到達最后一張圖片時返回第一張圖片。 最后，我們使用setInterval()函數來調用updateCarousel()函數，并設置時間間隔為5秒。 這就是我們的一個完整的HTML代碼來實現焦點圖輪播效果。請注意，這只是一個最基本的輪播效果，您可以根據需要添加更多的樣式、動畫和交互特效。