js實現簡單的輪播圖效果

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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章