定時器 在實現輪播圖之前需要首先瞭解一下JavaScript的定時器 setInterval()和clearInterval() 1、setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式 setInterval() 方法會不停地調用函數，直到 clearInterval ...
定時器
在實現輪播圖之前需要首先瞭解一下JavaScript的定時器 setInterval()和clearInterval()
1、setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數
語法：
setInterval(code, milliseconds);2、clearInterval() 方法可取消由 setInterval() 函數設定的定時執行操作，clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值
語法：
clearInterval(id_of_setinterval)實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function test(){
console.log("setInterval 調用了");
}
var timerID;
function startDinshiqi(){
timerID = setInterval("test()",2000);
}
function stopDingshiqi(){
clearInterval(timerID);
}
</script>
</head>
<body>
<input type="button" value="開啟定時器" onclick="startDinshiqi()" /><br />
<input type="button" value="取消定時器" onclick="stopDingshiqi()"/><br />
</body>
</html>
切換圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function changeImg(){
// alert("要切換了")
var img = document.getElementById("img1");
img.src = "../img/2.jpg";
}
</script>
</head>
<body>
<input type="button" value="點擊切換圖片" onclick="changeImg()" />
<br />
<img src="../img/1.jpg" id="img1" />
</body>
</html>圖片自動輪播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var index = 0;
function changeImg(){
//1. 獲得要切換圖片的那個元素
var img = document.getElementById("img1");
//計算出當前要切換到第幾張圖片
var curIndex = index%3 + 1; //0,1,2
img.src="../img/"+curIndex+".jpg"; //1,2,3
//每切換完,索引加1
index = index + 1;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>
