今天我們來(lái)介紹一款簡(jiǎn)單的 HTML 滾動(dòng)圖片代碼 Demo。
<!DOCTYPE html>
<html>
<head>
<title>滾動(dòng)圖片 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 代碼部分，我們?cè)?body 中創(chuàng)建一個(gè) div 容器來(lái)放置需要滾動(dòng)的圖片。其中每個(gè)圖片都是通過(guò) img 標(biāo)簽引入的，并且需要給定一個(gè)寬度和高度。接下來(lái)我們需要在 JavaScript 代碼中獲取到這些圖片，這里我們通過(guò) document.getElementById 和 getElementsByTagName 兩個(gè)方法來(lái)獲取。這里需要注意的是，我們需要使用 style.display 屬性來(lái)實(shí)現(xiàn)圖片的顯示和隱藏。
在 JavaScript 代碼部分，我們定義了一個(gè) setInterval 方法，每隔一定時(shí)間就會(huì)執(zhí)行一次其中的函數(shù)。這里我們使用 i%imgs.length 來(lái)實(shí)現(xiàn)圖片的循環(huán)滾動(dòng)，通過(guò) i 的變化從而改變當(dāng)前圖片的顯示狀態(tài)。最后將整個(gè) JavaScript 代碼寫在 script 標(biāo)簽中，放置在 HTML 代碼體的末尾，即可實(shí)現(xiàn)簡(jiǎn)單的滾動(dòng)圖片效果。
上述是一個(gè)簡(jiǎn)單的 HTML 滾動(dòng)圖片代碼 Demo，通過(guò)這種方式，可以讓頁(yè)面得到進(jìn)一步的美化和提升，讓用戶感覺(jué)更加舒適和愉悅。