原生js實(shí)現(xiàn)簡單輪播圖效果

更新時(shí)間：2021年09月03日 16:28:49 作者：凌小峰

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

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

效果如下：

分析：

分析效果：

分析實(shí)現(xiàn)：

1、通過 document.querySelector('.類名') 的形式獲取到裝輪播圖的大盒子（.carousel）、裝輪播圖左右按鈕的標(biāo)簽的父元素（.chevron）、獲取左右按鈕（.chevron-left 、.chevron-right）、獲取放輪播圖圖片的父元素ul（.carousel-body）【注：這里獲取ul而不是回去li，是因?yàn)橐苿?dòng)輪播圖的時(shí)候是整個(gè)ul一起移動(dòng)的】、最后還要獲取裝輪播圖圖片的li（.indicators li）

//裝輪播圖的大盒子
let oCarousel = document.querySelector('.carousel')
//裝輪播圖左右按鈕的標(biāo)簽的父元素
let oChevron = document.querySelector('.chevron')
//左按鈕
let oLeft = document.querySelector('.chevron-left')
//右按鈕
let oRight = document.querySelector('.chevron-right')
//獲取放輪播圖圖片的父元素ul
let oUl = document.querySelector('.carousel-body')
//獲取裝輪播圖圖片的li
let oActives = document.querySelectorAll('.indicators li')

2、實(shí)現(xiàn)通過點(diǎn)擊左右按鈕使輪播圖實(shí)現(xiàn)上一張、下一張的效果：

先封裝一個(gè)animation()函數(shù)，便于多次調(diào)用

function animation(obj,target){
    // 清除定時(shí)器
        clearInterval(obj.timer)
        obj.timer=setInterval(()=>{
            // 讀取元素當(dāng)前位置
            let curX=obj.offsetLeft
 
            //定義一個(gè)步長
            let step=10
            // 判斷將要移動(dòng)的方向(比較目標(biāo)位置與當(dāng)前位置的大小) 
            if(target<curX){
                step=-10
            }
            // 根據(jù)當(dāng)前位置與目標(biāo)位置，以及步長的關(guān)系判斷
            // 只要目標(biāo)位置與當(dāng)前位置之間的距離 < 步長，就直接將元素的位置設(shè)置為目標(biāo)為位置即可
            if(Math.abs(target-curX)<Math.abs(step)){
                obj.style.left=target+'px'
                clearInterval(obj.timer)
            }else{
                // 計(jì)算下一步的位置
                let nextX=curX+step
                // 將下一步的位置賦值給obj.style.left
                obj.style.left=nextX+'px'
            }
        },10)
    }

①由于鼠標(biāo)移入輪播圖的時(shí)候前，輪播圖中的左右箭頭是隱藏的，當(dāng)鼠標(biāo)移入時(shí)顯示；因此需要為裝輪播圖的大盒子（.carousel）綁定鼠標(biāo)移入（onmouseover）和鼠標(biāo)移出事件（onmouseout）

oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
    }
 
    oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
    }

②為左右按鈕綁定點(diǎn)擊事件，定義一個(gè)計(jì)數(shù)器全局變量n，代表輪播圖中圖片的位置，因?yàn)檫@里一個(gè)li的大小為500px，所以設(shè)置一個(gè)全局變量步長step為500（步長作為每次移動(dòng)輪播圖中ul的距離）

let n = 0
let step = 500
    oLeft.onclick = function () {
        n--
        
        if (n == -1) {
       //當(dāng)移到第一張(n=0)，再次點(diǎn)擊時(shí)(n=-1)，將n設(shè)置為4，跳轉(zhuǎn)到最后一張圖片的位置
       //裝輪播圖圖片的ul的位置改為最后一張圖片的位置（因?yàn)橐粡垐D片width為500px，所以最后一張?jiān)?*500=2500的位置）
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        //target為移動(dòng)距離，即：第n張圖片 * 每張圖片的width 
        let target = -n * step
        animation(oUl, target)
 
    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
        //當(dāng)移到第最后一張(n=5)，再次點(diǎn)擊時(shí)(n=6)，將n設(shè)置為1，跳轉(zhuǎn)到第一張圖片的位置
            oUl.style.left = 0 + 'px'
            n = 1
        }
        let target = -n * step
        animation(oUl, target)
 
    }

3、通過點(diǎn)擊下面的數(shù)字來實(shí)現(xiàn)輪播圖切換

//因?yàn)樯厦嫱ㄟ^document.querySelectorAll('.indicators li') 獲取到的li是通過偽數(shù)組的形式返回的，使用需要遍歷該偽數(shù)組為每個(gè)li綁定點(diǎn)擊事件
for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = function () {
            //為被點(diǎn)擊的第i個(gè)設(shè)置樣式為高亮
            setActive(i)
            //并且把i的值賦值給n（相當(dāng)于記錄當(dāng)前應(yīng)該顯示第i張圖片）
            n = i
            //設(shè)置移動(dòng)的距離
            let target = -n * step
            animation(oUl, target)
        }
    }
 
    // 封裝一個(gè)函數(shù)，實(shí)現(xiàn)li的高亮
    function setActive(ind) {
        //使用排他思想：清除全部，然后在單獨(dú)設(shè)置類名
        for (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'active'
    }

修改第2步中點(diǎn)擊左右箭頭滑動(dòng)輪播圖下面頁面高亮不變的情況

oLeft.onclick = function () {
        n--
        if (n == -1) {
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        //調(diào)用setActive()函數(shù)，修改第n張圖片頁碼的高亮狀態(tài)
        setActive(n)
        let target = -n * step
        animation(oUl, target)
 
    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
            oUl.style.left = 0 + 'px'
            n = 1
        }
        //如果n為5時(shí)，表示已經(jīng)到了第6張圖片（而第六張圖片是和第1張一樣的，只是用來滑動(dòng)過渡，防止瞬間跳轉(zhuǎn)的效果）所以需要設(shè)置頁碼為0（即第一張圖片）的高亮狀態(tài)
        //這里使用了三元表達(dá)式，如果n為5，則設(shè)置第1張圖片為高亮，否則設(shè)置第n張為高亮
        n == 5 ? setActive(0) : setActive(n)
        let target = -n * step
        animation(oUl, target)
 
    }

4、設(shè)置定時(shí)器，在移入輪播圖時(shí)清除定時(shí)器，移出時(shí)開啟定時(shí)器（實(shí)現(xiàn)移入時(shí)停止自動(dòng)播放，移出時(shí)開啟自動(dòng)播放）

//在加載頁面時(shí)應(yīng)該先開啟定時(shí)器，否則輪播圖不能自動(dòng)播放，需要等待一次移入且移出事件才會(huì)開啟定時(shí)器
timer = setInterval(function () {
            //調(diào)用右側(cè)按鈕綁定的點(diǎn)擊事件
            oRight.onclick()
        }, 2000)
 
    //鼠標(biāo)移入時(shí)，顯示左右箭頭，并且清除定時(shí)器
    oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
        clearInterval(timer)
    }
 
    //鼠標(biāo)移出時(shí)，隱藏左右箭頭，并且開啟定時(shí)器
    oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
        timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    }

完整代碼如下：

CSS樣式如下：

* {
     margin: 0;
     padding: 0;
        }
 
        .carousel {
            width: 500px;
            height: 200px;
            border: 1px solid red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .carousel li {
            list-style: none;
        }
 
        /* 輪播內(nèi)容 */
        .carousel-body {
            width: 3000px;
            height: 200px;
            position: absolute;
        }
        .carousel-body li {
            list-style: none;
            float: left;
            width: 500px;
            height: 200px;
        }
 
        .carousel-body li img {
            width: 100%;
            height: 100%;
        }
 
 
        /* 左右焦點(diǎn)按鈕 */
        .carousel .chevron {
            position: absolute;
            top: 50%;
            height: 40px;
            width: 100%;
            transform: translateY(-50%);
            display: none;
        }
 
        .carousel .chevron-left,
        .carousel .chevron-right {
            width: 40px;
            height: 40px;
            background: #000;
            cursor: pointer;
            text-align: center;
            line-height: 40px;
            font-size: 30px;
            font-weight: bold;
            color: #fff;
            opacity: .3;
            border: 1px solid #fff;
        }
 
 
        .carousel .chevron-left {
            float: left;
            margin-left: 10px;
        }
 
 
        .carousel .chevron-right {
            float: right;
            margin-right: 10px;
        }
 
 
        /* 5.2 輪播指示器結(jié)構(gòu) */
        .carousel .indicators {
            position: absolute;
            right: 30px;
            bottom: 20px;
        }
 
        .carousel .indicators li {
            float: left;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background: rgba(255, 255, 255, .8);
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            color: rgba(0, 0, 0, .5);
        }
 
        .carousel .indicators li.active {
            background: #09f;
            color: red;
 }

HTML如下：

<div class="carousel">
        <!-- 輪播內(nèi)容 -->
        <ul class="carousel-body">
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <!-- a3.1 新增1個(gè)li與第1張相同 -->
            <!-- <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> -->
        </ul>
        <!-- 左右焦點(diǎn)按鈕 -->
        <div class="chevron">
            <div class="chevron-left">&laquo;</div>
            <div class="chevron-right">&raquo;</div>
        </div>
        <!-- 5.1 輪播指示器結(jié)構(gòu) -->
        <ol class="indicators">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
</div>

js如下：

let oCarousel = document.querySelector('.carousel')
let oChevron = document.querySelector('.chevron')
let oLeft = document.querySelector('.chevron-left')
let oRight = document.querySelector('.chevron-right')
let oUl = document.querySelector('.carousel-body')
let oActives = document.querySelectorAll('.indicators li')
 
    let n = 0
    let step = 500
    let timer
    timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    oCarousel.onmouseover = function () {
        oChevron.style.display = "block"
        clearInterval(timer)
    }
 
    oCarousel.onmouseout = function () {
        oChevron.style.display = "none"
        timer = setInterval(function () {
            oRight.onclick()
        }, 2000)
    }
    oLeft.onclick = function () {
        n--
        if (n == -1) {
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        setActive(n)
        let target = -n * step
        animation(oUl, target)
 
    }
    oRight.onclick = function () {
        n++
        if (n == 6) {
            oUl.style.left = 0 + 'px'
            n = 1
        }
        n == 5 ? setActive(0) : setActive(n)
        let target = -n * step
        animation(oUl, target)
 
    }
    for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = function () {
            setActive(i)
            n = i
            let target = -n * step
            animation(oUl, target)
        }
    }
 
    // 封裝一個(gè)函數(shù)，實(shí)現(xiàn)li的高亮
    function setActive(ind) {
        for (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'active'
    }
 
    function animation(obj,target){
        // 清除定時(shí)器
        clearInterval(obj.timer)
        obj.timer=setInterval(()=>{
            // 讀取元素當(dāng)前位置
            let curX=obj.offsetLeft
 
            //定義一個(gè)步長
            let step=10
            // 判斷將要移動(dòng)的方向(比較目標(biāo)位置與當(dāng)前位置的大小) 
            if(target<curX){
                step=-10
            }
            // 根據(jù)當(dāng)前位置與目標(biāo)位置，以及步長的關(guān)系判斷
            // 只要目標(biāo)位置與當(dāng)前位置之間的距離 < 步長，就直接將元素的位置設(shè)置為目標(biāo)為位置即可
            if(Math.abs(target-curX)<Math.abs(step)){
                obj.style.left=target+'px'
                clearInterval(obj.timer)
            }else{
                // 計(jì)算下一步的位置
                let nextX=curX+step
                // 將下一步的位置賦值給obj.style.left
                obj.style.left=nextX+'px'
            }
        },10)
}

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

您可能感興趣的文章: