今天我們要講解如何通過 HTML 和 JavaScript 實現(xiàn)圖片切換效果。我們可以使用一個包含多張圖片的圖片輪播來演示這個效果。下面是我們的代碼：

HTML 代碼：

<div id="slider">
<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
<img src="img5.jpg" alt="">
</div>

這里我們創(chuàng)建了一個名為“slider”的 div 容器，里面包含了五張圖片。

接下來是 JavaScript 代碼：

var slider = document.getElementById('slider');
var images = slider.getElementsByTagName('img');
var current = 0;
function next() {
images[current].className = '';
current = (current + 1) % images.length;
images[current].className = 'show';
}
setInterval(next, 3000);

首先，我們獲取了“slider”中的所有圖片，并且設置一個變量“current”來保存當前顯示的圖片。接著，我們編寫一個“next”的函數(shù)，用于把當前的圖片隱藏，并把下一張圖片顯示出來。這里我們使用了“className”來切換圖片的 CSS 類。最后，我們設置一個定時器，在三秒鐘后調用“next”函數(shù)。

現(xiàn)在我們可以在瀏覽器里運行這個代碼，并且會看到每三秒鐘圖片會自動切換一次。