JS切換圖片(使用了定時器setInterval()方法)

setInterval()方法:每隔一段事件執(zhí)行一次函數(shù)

--參數(shù):1、回調(diào)函數(shù)

????????????? 2、間隔時間,毫秒為單位

例子:每隔1秒打印一次hello

setInterval(function(){

alert("hello");

},1000);


圖片切換效果圖:


代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript">

window.onload = function(){

var btn01 = document.getElementById("btn01");

//獲取img對象

var img1 = document.getElementById("img1");

//創(chuàng)建一個數(shù)組存儲圖片的路徑

var imgArr = ["img/1.png","img/2.png","img/3.png","img/4.png"];

//index來圖片改變路徑

var index = 0;

//定義一個識別定時器的變量

var timer;

btn01.onclick = function(){

/**

* 一點擊開始按鈕,開啟一個定時器 每隔1000毫秒切換圖片

* 此時,我們每點擊一次按鈕 就會開啟一個定時器,

* 點擊多次開啟 會導致圖片切換速度過快

*/

//因此,在開啟定時器之前需要將上一個定時器關(guān)閉

clearInterval(timer);

timer = setInterval(function(){

index++;

index = index % imgArr.length;

img1.src = imgArr[index];

},1000);

};

/**

* 點擊停止按鈕時,取出定時器

*/

btn02.onclick = function(){

clearInterval(timer);

}

};

</script>

</head>

<body>

<img src="img/1.png" id="img1" height="300px" width="300px">

<br /><br>

<button type="button" id="btn01">開始</button>

<button type="button" id="btn02">停止</button>

</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容