HTML和JS是構建網站的基礎。在網頁中，經常用到圖片滾動。下面就來介紹一下如何通過HTML和JS代碼實現圖片滾動效果。

// HTML代碼
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
// CSS代碼
.slider {
width: 600px;
height: 300px;
position: relative;
overflow: hidden;
}
.slider img {
width: 600px;
height: 300px;
position: absolute;
}
// JS代碼
let sliderImages = document.querySelectorAll('.slider img');
let currentImageIndex = 0;
let sliderImageNumber = sliderImages.length;
function nextImage() {
sliderImages[currentImageIndex].classList.remove('active');
currentImageIndex = (currentImageIndex + 1) % sliderImageNumber;
sliderImages[currentImageIndex].classList.add('active');
}
setInterval(nextImage, 2000);

在HTML代碼中，我們使用一個div容器包含多個img元素，這些元素是需要滾動的圖片。在CSS代碼中，設置slider容器的寬度和高度，并將其設置為相對定位和“overflow: hidden”隱藏滾動部分。每個img元素使用絕對定位并填充整個容器。在JS代碼中，我們先選擇所有的img元素，并定義了三個變量。currentImageIndex定義了當前圖片的下標，sliderImageNumber定義了圖片的數量，nextImage函數用于顯示下一張圖片。該函數首先刪除當前顯示的圖片的樣式，然后更改下一個圖片的樣式，最后將該圖片的樣式添加到“active”類中。通過setInterval函數，每隔兩秒鐘就會調用nextImage函數，實現圖片自動滾動的效果。