今天我們來介紹一款簡單的 HTML 滾動圖片代碼 Demo。
<!DOCTYPE html>
<html>
<head>
<title>滾動圖片 Demo</title>
</head>
<body>
<div id="scrolling">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>
<script>
var div = document.getElementById('scrolling');
var imgs = div.getElementsByTagName('img');
var i = 0;
setInterval(function(){
imgs[i%imgs.length].style.display = 'none';
imgs[++i%imgs.length].style.display = 'block';
}, 3000);
</script>
</body>
</html>首先是 HTML 代碼部分，我們在 body 中創建一個 div 容器來放置需要滾動的圖片。其中每個圖片都是通過 img 標簽引入的，并且需要給定一個寬度和高度。接下來我們需要在 JavaScript 代碼中獲取到這些圖片，這里我們通過 document.getElementById 和 getElementsByTagName 兩個方法來獲取。這里需要注意的是，我們需要使用 style.display 屬性來實現圖片的顯示和隱藏。
在 JavaScript 代碼部分，我們定義了一個 setInterval 方法，每隔一定時間就會執行一次其中的函數。這里我們使用 i%imgs.length 來實現圖片的循環滾動，通過 i 的變化從而改變當前圖片的顯示狀態。最后將整個 JavaScript 代碼寫在 script 標簽中，放置在 HTML 代碼體的末尾，即可實現簡單的滾動圖片效果。
上述是一個簡單的 HTML 滾動圖片代碼 Demo，通過這種方式，可以讓頁面得到進一步的美化和提升，讓用戶感覺更加舒適和愉悅。