window.setInterval(code,millisec)按照指定的週期(間隔)來執行函數或代碼段。
參數1:code必須。執行的函數名或者執行的代碼段
參數2:millisec必須。間隔時間,即週期。單位毫秒。
window對象提供的都是全局函數,調用函數時可將window省略。
第一步:確定事件(onload)併爲其綁定一個函數
第二步:編寫事件觸發函數
第三步:編寫定時任務(setInterval)
第四步:編寫定時任務裏面的函數
第五步:通過變量的方式,進行循環(獲取輪播圖的位置,並設置 src 屬性)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.images {
width: 500px;
height: 500px;
margin: auto;
border: 1px solid red;
}
</style>
<script>
//頁面加載完調用init函數
window.onload = init;
function init() {
//啓用定時器
window.setInterval("changImg()",2000);
}
var i = 1;
function changImg() {
i++;
document.getElementById("img").src = "images/"+i+".jpg";
if(i > 24) {
i = 0;
}
}
</script>
<body>
<div class="images">
<img src="images/1.jpg" id="img">
</div>
</body>
</html>