輪播圖是我們在網(wǎng)頁設(shè)計中經(jīng)常使用的一種效果，能夠讓頁面更加美觀和動態(tài)。常見的輪播圖效果有自動切換和手動切換兩種，而其中使用HTML和JS完成的自動切換輪播圖效果比較常見。下面是一段HTML和JS的源代碼實現(xiàn)自動切換的輪播圖效果。

<div class="slider">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
<img src="image5.jpg" alt="image5">
</div>
<script>
var slider = document.querySelector(".slider");
var images = slider.querySelectorAll("img");
var index = 0;
function changeImage() {
for(var i = 0; i< images.length; i++) {
images[i].style.display = "none";
}
index++;
if(index >images.length) {
index = 1;
}
images[index - 1].style.display = "block";
setTimeout(changeImage, 3000);
}
changeImage();
</script>

這段代碼中，首先我們創(chuàng)建了一個包含多張圖片的div容器，然后使用JS獲取該容器內(nèi)的所有圖片元素，并定義一個index變量用于記錄當前顯示的圖片序號。隨后通過changeImage()函數(shù)實現(xiàn)循環(huán)自動切換圖片的邏輯，該函數(shù)首先將所有圖片的display屬性設(shè)置為none，以達到隱藏所有圖片的效果。然后將index遞增并進行判斷，若當前序號超過了圖片數(shù)量，則又從頭開始顯示。最后顯示當前序號對應(yīng)的圖片，并使用setTimeout定時3秒后執(zhí)行下一次切換操作。