js實現輪播圖

時間不會賴著不走發表於2021-01-02
JS

輪播圖的實現主要是BOM中window視窗物件裡面的與定時器有關的方式
setTimeout() 在指定的毫秒數後呼叫函式或計算表示式。
* 引數：
1. js程式碼或者方法物件
2. 毫秒值
* 返回值：唯一標識，用於取消定時器
clearTimeout() 取消由 setTimeout() 方法設定的 timeout。
setInterval() 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
clearInterval() 取消由 setInterval() 設定的 timeout。
步驟
0.準備幾張圖片
1.在頁面上使用img標籤展示圖片
2.定義一個方法.修改圖片物件的src屬性，來實現更改的圖片的功能
3.定義一個定時器，每隔一段時間使用一次方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<img id="img" src="img/banner_1.jpg" width="100%">

<script>


    var i=1;
    function fun() {
        i++;
        if(i>3){
            i=1;
        }
        var img = document.getElementById("img");
        img.src="img/banner_"+i+".jpg";

    }

    setInterval(fun,2000);
</script>

</body>
</html>

相關文章