快捷導(dǎo)航

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

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

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

HTML部分

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

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

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

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

CSS部分

給輪播圖盒子以及小圓點(diǎn)添加樣式

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

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

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

        /* 給小圓點(diǎn)設(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;
        }

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

        /* 選中狀態(tài)下得小圓點(diǎn)樣式，改背景色為白色半透明 */
        .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í)器間歇函數(shù),實(shí)現(xiàn)自動(dòng)切換圖片的效果

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

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

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

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

        /* 給小圓點(diǎn)設(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;
        }

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

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

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

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

    </script>
</body>

</html>

總結(jié)

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

效果圖

到此這篇關(guān)于JS使用定時(shí)器與事件監(jiān)聽實(shí)現(xiàn)輪播圖切換功能的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)輪播圖切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: