HTML循環播放是一種常用的網頁設計技術,通過循環播放的方式實現動畫效果。
<html> <head> <title>循環播放</title> </head> <body> <div id="play"></div> <script> var div=document.getElementById("play"); //獲取div元素 var i=1; //循環變量 setInterval(function(){ //定時器 if(i==6) //判定循環次數 i=1; div.style.background="url(images/"+i+".jpg) no-repeat"; //設置背景圖片 i++; },1000); //循環間隔 </script> </body> </html>
在上述代碼中,首先創建了一個空的div元素,并給它指定了一個id屬性值為“play”。
在JS代碼中,首先用getElementById()方法獲取了這個div元素,并將其存儲在一個變量中。
然后使用setInterval()函數創建一個循環,每隔一定時間執行一次函數。
在這個函數中,首先判斷循環次數是否達到了5次,如果達到了則從1開始重新循環。
之后,使用DOM操作改變div元素的背景圖片,從而實現循環播放的效果。
上一篇HTML得用HTML代碼
下一篇python 控制趣頭條