HTML中實(shí)現(xiàn)圖片自動(dòng)播放是一件簡(jiǎn)單的事情，下面給大家提供一些樣例代碼。
首先，在頁(yè)面頭部引入jQuery庫(kù)文件，然后在body標(biāo)簽內(nèi)編寫(xiě)圖片列表和相應(yīng)的JS代碼。
<head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="play_img">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
</div>
<script>
var index = 0;
var time = setInterval(autoPlay, 3000);
function autoPlay() {
if (index >= $("#play_img img").length) {
index = 0;
}
$("#play_img img").eq(index).fadeIn().siblings().fadeOut();
index++;
}
</script>
</body>代碼注釋：
1、通過(guò)引用jQuery庫(kù)文件，使用jQuery的選擇器獲取圖片列表；
2、使用setInterval函數(shù)實(shí)現(xiàn)圖片自動(dòng)切換，每隔3秒鐘使用fadeIn和fadeOut實(shí)現(xiàn)圖片的淡入淡出。
3、通過(guò)一個(gè)索引index來(lái)記錄當(dāng)前第幾張圖片。如果當(dāng)前索引大于等于圖片列表長(zhǎng)度，則將索引清空。
這樣，刷新頁(yè)面后就可以實(shí)現(xiàn)圖片自動(dòng)播放了。這是一個(gè)非常簡(jiǎn)單的代碼示例，類(lèi)似的效果可以根據(jù)具體需要進(jìn)行修改和擴(kuò)展。