JS實(shí)現(xiàn)輪播圖小案例

更新時間：2021年11月16日 17:28:33 作者：B.Bz

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)輪播圖小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)輪播圖小案例的具體代碼，供大家參考，具體內(nèi)容如下

分析：

點(diǎn)擊左右箭頭滑動輪播圖
鼠標(biāo)不在輪播圖內(nèi)時每隔2秒自動滑動輪播圖
鼠標(biāo)移入時停止自動滑動輪播圖
點(diǎn)擊小圓圈顯示對應(yīng)的輪播圖

1、鼠標(biāo)移入、移出顯示或隱藏左右箭頭：

// 獲取左右箭頭的元素
    let arrow_l = this.document.querySelector('.arrow-l');
    let arrow_r = this.document.querySelector('.arrow-r');
    // 獲取到輪播圖盒子元素
    let focus = this.document.querySelector('.focus');

    // 輪播圖盒子添加鼠標(biāo)移入移出事件 顯示或隱藏 左右箭頭
    focus.addEventListener('mouseenter', function(e) {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 鼠標(biāo)移入的時候清除定時函數(shù)，不再自動滑動輪播圖
        clearInterval(timer);
        timer = null;

    });

    focus.addEventListener('mouseleave', function(e) {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 鼠標(biāo)移出  添加定時任務(wù)，每2秒來觸發(fā)一次點(diǎn)擊右箭頭的點(diǎn)擊
        timer = setInterval(function() {
            arrow_r.click();
        }, 2000);
    })

2、添加ol內(nèi)的li標(biāo)簽：

// 獲取到ul列表（輪播圖列表）和ol列表 （小圓圈列表）元素
var ul = focus.querySelector('ul');
// 此時ol列表內(nèi)沒有元素
var ol = focus.querySelector('.circle');
// 循環(huán)輪播圖列表 有多少張輪播圖就添加多少個小圓圈
for (var i = 0; i < ul.children.length; i++) {
        // 創(chuàng)建li標(biāo)簽
        var li = this.document.createElement('li');
        // 給li標(biāo)簽添加自定義屬性 為輪播圖的下標(biāo) 用于
        li.setAttribute('l-index', i);
        // ol標(biāo)簽添加li標(biāo)簽
        ol.appendChild(li);
        // 每一個li標(biāo)簽添加點(diǎn)擊函數(shù)
        li.addEventListener('click', function() {
            // 清除所有小圓圈的樣式
            for (var j = 0; j < ol.children.length; j++) {
                ol.children[j].className = '';
            }
            // 點(diǎn)擊哪一個小圓圈  就添加樣式
            this.className = 'current';

   // 點(diǎn)擊小圓圈  更改num和circl 來更換輪播圖
            num = this.getAttribute('l-index');
            circl = this.getAttribute('l-index');
            // 動畫效果
            animate(ul, -num * focusWidth);
        })

    }

3、復(fù)制第一張輪播圖到ul的最后，顯得輪播圖更自然，添加記錄輪播圖的下標(biāo)和記錄小圓圈的下標(biāo)，添加節(jié)流閥：
節(jié)流閥：

添加一個節(jié)流閥默認(rèn)為true 如果點(diǎn)擊之后立即改為false 如果沒處理完上次點(diǎn)擊的事件這個時間內(nèi)的點(diǎn)擊事件不再處理
類似一個鎖，當(dāng)鎖住的時候只做一件事，別的點(diǎn)擊不會再做，等什么時候開了鎖，什么時候才可以做。

// 克隆一個第一張輪播圖的節(jié)點(diǎn)添加到ul內(nèi)
// 播放到最后一個的時候  轉(zhuǎn)到第一個看著有連貫性
    ol.children[0].className = 'current';
    let cloneLi = ul.children[0].cloneNode(true);
    ul.appendChild(cloneLi);

    // 添加一個下標(biāo)  來記錄輪播圖播放到了第幾張
    num = 0;
    // 與num類似，記錄小圓圈的下標(biāo)
    circl = 0;
    // 添加節(jié)流閥
    flag = true;

4、右箭頭、左箭頭的點(diǎn)擊事件和小圓圈更改樣式：

// 點(diǎn)擊右箭頭的  點(diǎn)擊事件
arrow_r.addEventListener('click', function(e) {
        // 添加一個節(jié)流閥 默認(rèn)為True 如果點(diǎn)擊之后立即改為false  如果沒處理完上次點(diǎn)擊的事件 這個時間內(nèi)的點(diǎn)擊事件不再處理
        if (flag) {
            // 改變節(jié)流閥的狀態(tài)
            flag = false;

            // 如果num下標(biāo)為最后一張 就恢復(fù)到第一張 把num下標(biāo)改為默認(rèn)0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;

            }
            // num下標(biāo)加1
            num++;
            // 改變動畫效果 滑動到  第幾張輪播圖 * 一張的寬度 的距離
            animate(ul, -num * focusWidth, function() {
                // 回調(diào)函數(shù)設(shè)置節(jié)流閥為true  可以再次點(diǎn)擊
                flag = true;
            });

            // 小圓圈+1
            circl++;
            // 如果小圓圈到了最后一個  恢復(fù)為0
            if (circl == ul.children.length - 1) {
                circl = 0;
            }
            // 改變小圓圈的樣式
            circlChange();
        }
    })

// 左箭頭的點(diǎn)擊事件
    arrow_l.addEventListener('click', function(e) {
        if (flag) {
            flag = false;
            // 判斷為0時說明是從第一張開始往左點(diǎn)
            if (num == 0) {
                // 更改num下標(biāo)為最后一個
                num = ul.children.length - 1;
                // 更改輪播圖為最后一個
                ul.style.left = -num * focusWidth + 'px';
            }
            // num -1
            num--;
            // 動畫效果
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // 如果小圓圈為0  說明到了第一個輪播圖
            if (circl == 0) {
                // 小圓圈到最后一個
                circl = ul.children.length - 1;
            }
            // 小圓圈-1
            circl--;
            // 改變小圓圈的樣式
            circlChange();
        }
    })

function circlChange() {
     // 遍歷ol列表  刪除每一個小圓圈的樣式
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        };
        // 給當(dāng)前circl下標(biāo)的小圓圈添加樣式
        ol.children[circl].className = 'current';
    }

5、輪播圖動畫函數(shù)的封裝：

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  調(diào)用的時候 callback()


    // 先清除以前的定時器，只保留當(dāng)前的一個定時器執(zhí)行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步長值寫到定時器的里面
        // 把我們步長值改為整數(shù) 不要出現(xiàn)小數(shù)的問題
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止動畫 本質(zhì)是停止定時器
            clearInterval(obj.timer);
            // 回調(diào)函數(shù)寫到定時器結(jié)束里面
            // if (callback) {
            //     // 調(diào)用函數(shù)
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 這個步長值改為一個慢慢變小的值  步長公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: