快捷導(dǎo)航

JS使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能

更新時間：2022年11月17日 10:51:39 作者：可樂不撒

現(xiàn)在很多網(wǎng)站都有輪播圖,下面這篇文章主要給大家介紹了關(guān)于JS如何使用定時器與事件監(jiān)聽實現(xiàn)輪播圖切換功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

HTML部分

html部分比較簡單,這里直接上代碼

頁面中默認(rèn)顯示第一張圖片

ps.這里我找了四張圖，所以有四個li

<div class="box">
    <img src="./images/1.jpg" alt="">
    <!-- 圖片下方小圓點 -->
    <ol>
        <!-- 開始給第一個小圓點設(shè)置默認(rèn)active類 代表點擊選中的狀態(tài)-->
        <li class="active "></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

CSS部分

給輪播圖盒子以及小圓點添加樣式

        /* 清除頁面默認(rèn)內(nèi)外邊距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 給輪播圖容器盒子設(shè)置寬高和相對定位 */
        .box {
            position: relative;
            width: 382px;
            height: 237px;
            margin: 100px auto;
        }

        img {
            width: 100%;
            height: 100%;
        }

        /* 給小圓點設(shè)置絕對定位,定到圖片下方 */
        ol {
            /* 改為彈性容器 */
            display: flex;
            position: absolute;
            width: 80px;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0);
            list-style: none;
            /* 設(shè)置li的主軸對齊方式 */
            justify-content: space-between;
        }

        /* 每一個小圓點設(shè)置背景黑色半透明和鼠標(biāo)樣式 */
        li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        /* 選中狀態(tài)下得小圓點樣式，改背景色為白色半透明 */
        .active {
            background-color: rgba(255, 255, 255, 0.8);
        }

JavaScript部分

首先將需要展示的圖片地址存入數(shù)組

let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']

使用定時器間歇函數(shù),實現(xiàn)自動切換圖片的效果

這里代碼比較簡單,我都寫了詳細(xì)注釋

        // 設(shè)置一個計數(shù)器變量
        let i = 0
        // setInterval(function(){},2000) 設(shè)置2000ms執(zhí)行一次
        // 這里function(){}里面就是切換圖片和小圓點樣式的函數(shù)
        setInterval(function () {
            i++
            // 如果切換到最后一張圖的時候,把計數(shù)器歸零
            if (i > arr.length - 1) {
                i = 0
            }
            // 獲取頁面中的img標(biāo)簽,注意這里頁面中只有一個img,
            // 所以使用querySelector,如果有多個就使用querySelectorAll
            // 兩者返回的值不同,前者返回的是一個對象類型,后者返回的是一個偽數(shù)組類型
            let imgSet = document.querySelector('img')
            // 更改img標(biāo)簽的src屬性為新的地址
            imgSet.src = arr[i]
            // 獲取所有的小圓點
            let point = document.querySelectorAll('li')
            // 獲取所有類名為active的標(biāo)簽,并清空類名,達到恢復(fù)小圓點為默認(rèn)樣式的效果
            document.querySelector('.active').className = ''
            // 給當(dāng)前小圓點添加active類名,設(shè)為選中狀態(tài)
            point[i].className = 'active'
        }, 2000)

最后就是事件監(jiān)聽實現(xiàn)自由切換圖片功能

        // 使用getElementsByTagName找到所有的li小圓點,得到的是偽數(shù)組
        let click = document.getElementsByTagName('li')
        // 這是for循環(huán),遍歷得到的偽數(shù)組
        for (let j = 0; j < click.length; j++) {
            // 給當(dāng)前小圓點添加事件監(jiān)聽,監(jiān)聽鼠標(biāo)點擊效果
            click[j].addEventListener('click', function () {
                清除所有有active類名的類
                document.querySelector('.active').className = ''
                // 代碼跟上面相同,就不解釋了
                click[j].className = 'active'
                let imgSet = document.querySelector('img')
                imgSet.src = arr[j]
                // 將計數(shù)器設(shè)置為當(dāng)前圓點
                i = j
            })
        }

完整代碼如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除頁面默認(rèn)內(nèi)外邊距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 給輪播圖容器盒子設(shè)置寬高和相對定位 */
        .box {
            position: relative;
            width: 382px;
            height: 237px;
            margin: 100px auto;
        }

        img {
            width: 100%;
            height: 100%;
        }

        /* 給小圓點設(shè)置絕對定位,定到圖片下方 */
        ol {
            /* 改為彈性容器 */
            display: flex;
            position: absolute;
            width: 80px;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0);
            list-style: none;
            /* 設(shè)置li的主軸對齊方式 */
            justify-content: space-between;
        }

        /* 每一個小圓點設(shè)置背景黑色半透明和鼠標(biāo)樣式 */
        li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            cursor: pointer;
        }

        /* 選中狀態(tài)下得小圓點樣式，改背景色為白色半透明 */
        .active {
            background-color: rgba(255, 255, 255, 0.8);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/1.jpg" alt="">
        <!-- 圖片下方小圓點 -->
        <ol>
            <li class="active "></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>


    <script>
        let arr = ['./images/1.jpg', './images/2.jpg', './images/3.jpg', './images/4.jpg']

        // 設(shè)置一個計數(shù)器變量
        let i = 0
        // setInterval(function(){},2000) 設(shè)置2000ms執(zhí)行一次
        // 這里function(){}里面就是切換圖片和小圓點樣式的函數(shù)
        setInterval(function () {
            i++
            // 如果切換到最后一張圖的時候,把計數(shù)器歸零
            if (i > arr.length - 1) {
                i = 0
            }
            // 獲取頁面中的img標(biāo)簽,注意這里頁面中只有一個img,
            // 所以使用querySelector,如果有多個就使用querySelectorAll
            // 兩者返回的值不同,前者返回的是一個對象類型,后者返回的是一個偽數(shù)組類型
            let imgSet = document.querySelector('img')
            // 更改img標(biāo)簽的src屬性為新的地址
            imgSet.src = arr[i]
            // 獲取所有的小圓點
            let point = document.querySelectorAll('li')
            // 獲取所有類名為active的標(biāo)簽,并清空類名,達到恢復(fù)小圓點為默認(rèn)樣式的效果
            document.querySelector('.active').className = ''
            // 給當(dāng)前小圓點添加active類名,設(shè)為選中狀態(tài)
            point[i].className = 'active'
        }, 2000)

        // 使用getElementsByTagName找到所有的li小圓點,得到的是偽數(shù)組
        let click = document.getElementsByTagName('li')
        // 這是for循環(huán),遍歷得到的偽數(shù)組
        for (let j = 0; j < click.length; j++) {
            // 給當(dāng)前小圓點添加事件監(jiān)聽,監(jiān)聽鼠標(biāo)點擊效果
            click[j].addEventListener('click', function () {
                清除所有有active類名的類
                document.querySelector('.active').className = ''
                // 代碼跟上面相同,就不解釋了
                click[j].className = 'active'
                let imgSet = document.querySelector('img')
                imgSet.src = arr[j]
                // 將計數(shù)器設(shè)置為當(dāng)前圓點
                i = j
            })
        }

    </script>
</body>

</html>

總結(jié)

前面實現(xiàn)自動切換的時候還好,但是在實現(xiàn)手動切換的時候,一開始沒有弄明白querySelector和querySelectorAll返回值得區(qū)別,不知道怎么獲取到底是哪一個小圓點鼠標(biāo)單擊點擊,所以一開始使用的是笨辦法,選中每一個小圓點添加事件綁定實現(xiàn)手動切換,代碼比較冗余,最會研究了一晚上,才搞明白兩者返回的值不同,前者返回的是一個對象類型,后者返回的是一個偽數(shù)組類型,如果想更改偽數(shù)組里的屬性,必須先遍歷一下數(shù)組,使用for循環(huán)遍歷之后給每一個小圓點添加事件監(jiān)聽切換圖片和圓點樣式