快捷導(dǎo)航

JavaScript實(shí)現(xiàn)輪播圖方法(邏輯清晰一看就懂)

更新時(shí)間：2023年12月26日 16:22:11 作者：Beannnnnnn

這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)輪播圖方法的相關(guān)資料,JS輪播圖的實(shí)現(xiàn)核心是使用JavaScript來控制圖片的切換和顯示,配合HTML和CSS完成布局和樣式設(shè)置,文中介紹的方法邏輯清晰一看就懂,需要的朋友可以參考下

效果圖

先來看下效果圖，嫌麻煩就不用具體圖片來實(shí)現(xiàn)了，主要是理清思路。（自動(dòng)輪播，左右按鈕切換圖片，小圓點(diǎn)切換圖片，鼠標(biāo)移入暫停輪播，鼠標(biāo)移出繼續(xù)輪播）

HTML

首先是html內(nèi)容，布局很簡(jiǎn)單，一個(gè)圖片列表，一個(gè)點(diǎn)列表，兩個(gè)按鈕。注意data-index使用HTML5中的data-xx屬性來嵌入自定義數(shù)據(jù)（下面JS代碼會(huì)提到）。記得給默認(rèn)顯示的圖片和對(duì)應(yīng)的小圓點(diǎn)加上active類哦。

 <div class="wrap">
        <ul class="list">
            <li class="item active">0</li>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index = 0></li>
            <li class="point" data-index = 1></li>
            <li class="point" data-index = 2></li>
            <li class="point" data-index = 3></li>
            <li class="point" data-index = 4></li>
        </ul>
        <button class="btn" id="leftBtn"> < </button> 
        <button class="btn" id="rightBtn"> > </button>

    </div>

CSS

思路：父容器list相對(duì)定位，item絕對(duì)定位，實(shí)現(xiàn)讓所有圖片重疊在父容器內(nèi)。利用z-index來設(shè)置圖片高度，圖片高度最高會(huì)顯示在頂層上。那么整個(gè)容器中，左右切換按鈕和小圓點(diǎn)始終要在最頂層，不能被圖片覆蓋，所以他們的z-index一定要比圖片高。active是一個(gè)樣式，給某張圖片綁定這個(gè)樣式就能在最上層顯示。然后就是圖片切換的漸變效果，opacity完全不透明到透明，再加個(gè)transition動(dòng)畫效果。最后就是cursor給小圓點(diǎn)添加“小手指”，其他就沒什么好說的了。

<style>
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            position: relative;
            padding-left: 0px;
        }

        .item {
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-color: skyblue;
        }

        .item:nth-child(2) {
            background-color: yellowgreen;
        }

        .item:nth-child(3) {
            background-color: rebeccapurple;
        }

        .item:nth-child(4) {
            background-color: pink;
        }

        .item:nth-child(5) {
            background-color: orange;
        }

        .item.active {
            z-index: 10;
            opacity: 1;
        }

        .btn {
            width: 60px;
            height: 100px;
            z-index: 100;
            top: 150px;
            position: absolute;
        }

        #leftBtn {
            left: 0px;
        }

        #rightBtn {
            right: 0px;
        }

        .pointList {
            list-style: none;
            padding-left: 0px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 200;
        }

        .point {
            width: 10px;
            height: 10px;
            background-color: antiquewhite;
            border-radius: 100%;
            float: left;
            margin-right: 8px;
            border-style: solid;
            border-width: 2px;
            border-color: slategray;
            cursor: pointer;  
        }

        .point.active{
            background-color: cadetblue;
        }
    </style>

Javascript

Index可以說是整個(gè)代碼里面的"核心"，先封裝一個(gè)清除active的方法，這里面要清除圖片的active（顯示在最上層），比如切換到下一張圖上張圖的active就要清除。還有point的active（圖片對(duì)應(yīng)小圓點(diǎn)改變樣式）。然后goIndex這個(gè)方法就是給圖片和對(duì)應(yīng)的小圓點(diǎn)同時(shí)加上active，左右按鈕綁定的方法就不說了。

用getAttribute拿到剛才給li標(biāo)簽綁定的data-index屬性，綁定圖片index = pointindex，就能實(shí)現(xiàn)點(diǎn)擊小圓點(diǎn)圖片切換了。由于上面goIndex方法早已經(jīng)綁定好了給圖片添加active樣式的時(shí)候也給小圓點(diǎn)添加的樣式了，就可以實(shí)現(xiàn)圖片切換小圓點(diǎn)跟隨變化的效果。

<script>
        var items = document.querySelectorAll(".item");//圖片節(jié)點(diǎn)
        var points = document.querySelectorAll(".point")//點(diǎn)
        var left = document.getElementById("leftBtn");
        var right = document.getElementById("rightBtn");
        var all = document.querySelector(".wrap")
        var index = 0;
        var time = 0;//定時(shí)器跳轉(zhuǎn)參數(shù)初始化
        

        //封裝一個(gè)清除active方法
        var clearActive = function () {
            for (i = 0; i < items.length; i++) {
                items[i].className = 'item';
            }
            for (j = 0; j < points.length; j++) {
                points[j].className = 'point';
            }
        }

        //改變active方法
        var goIndex = function () {
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active'
        }
        //左按鈕事件
        var goLeft = function () {
            if (index == 0) {
                index = 4;
            } else {
                index--;
            }
            goIndex();
        }

        //右按鈕事件
        var goRight = function () {
            if (index < 4) {
                index++;
            } else {
                index = 0;
            }
            goIndex();
        }
        

        //綁定點(diǎn)擊事件監(jiān)聽
        left.addEventListener('click', function () {
            goLeft();
            time = 0;//計(jì)時(shí)器跳轉(zhuǎn)清零
        })

        right.addEventListener('click', function () {
            goRight();
            time = 0;//計(jì)時(shí)器跳轉(zhuǎn)清零
        })

        for(i = 0;i < points.length;i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//計(jì)時(shí)器跳轉(zhuǎn)清零
            })
        }
        //計(jì)時(shí)器輪播效果
        var timer;
        function play(){
         timer = setInterval(() => {
            time ++;
            if(time == 20 ){
                goRight();
                time = 0;
            }    
        },100)
    }
        play();
        //移入清除計(jì)時(shí)器
        all.onmousemove = function(){
            clearInterval(timer)
        }
       //移出啟動(dòng)計(jì)時(shí)器
        all.onmouseleave = function(){
            play();
        }
    </script>

總結(jié)：這個(gè)簡(jiǎn)單的輪播圖實(shí)現(xiàn)例子是第一次寫最容易理解，邏輯最清晰的一種。下面我把完整的代碼塊放出來，直接復(fù)制粘貼就可以運(yùn)行。

<!DOCTYPE html>
<html>

<head>
    <style>
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            position: relative;
            padding-left: 0px;
        }

        .item {
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-color: skyblue;
        }

        .item:nth-child(2) {
            background-color: yellowgreen;
        }

        .item:nth-child(3) {
            background-color: rebeccapurple;
        }

        .item:nth-child(4) {
            background-color: pink;
        }

        .item:nth-child(5) {
            background-color: orange;
        }

        .item.active {
            z-index: 10;
            opacity: 1;
        }

        .btn {
            width: 60px;
            height: 100px;
            z-index: 100;
            top: 150px;
            position: absolute;
        }

        #leftBtn {
            left: 0px;
        }

        #rightBtn {
            right: 0px;
        }

        .pointList {
            list-style: none;
            padding-left: 0px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 200;
        }

        .point {
            width: 10px;
            height: 10px;
            background-color: antiquewhite;
            border-radius: 100%;
            float: left;
            margin-right: 8px;
            border-style: solid;
            border-width: 2px;
            border-color: slategray;
            cursor: pointer;  
        }

        .point.active{
            background-color: cadetblue;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="list">
            <li class="item active">0</li>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index = 0></li>
            <li class="point" data-index = 1></li>
            <li class="point" data-index = 2></li>
            <li class="point" data-index = 3></li>
            <li class="point" data-index = 4></li>
        </ul>
        <button class="btn" id="leftBtn"> < </button> 
        <button class="btn" id="rightBtn"> > </button>

    </div>
    <script>
        var items = document.querySelectorAll(".item");//圖片
        var points = document.querySelectorAll(".point")//點(diǎn)
        var left = document.getElementById("leftBtn");
        var right = document.getElementById("rightBtn");
        var all = document.querySelector(".wrap")
        var index = 0;
        var time = 0;//定時(shí)器跳轉(zhuǎn)參數(shù)初始化
        

        //清除active方法
        var clearActive = function () {
            for (i = 0; i < items.length; i++) {
                items[i].className = 'item';
            }
            for (j = 0; j < points.length; j++) {
                points[j].className = 'point';
            }
        }

        //改變active方法
        var goIndex = function () {
            clearActive();
            items[index].className = 'item active';
            points[index].className = 'point active'
        }
        //左按鈕事件
        var goLeft = function () {
            if (index == 0) {
                index = 4;
            } else {
                index--;
            }
            goIndex();
        }

        //右按鈕事件
        var goRight = function () {
            if (index < 4) {
                index++;
            } else {
                index = 0;
            }
            goIndex();
        }
        

        //綁定點(diǎn)擊事件監(jiān)聽
        left.addEventListener('click', function () {
            goLeft();
            time = 0;//計(jì)時(shí)器跳轉(zhuǎn)清零
        })

        right.addEventListener('click', function () {
            goRight();
            time = 0;//計(jì)時(shí)器跳轉(zhuǎn)清零
        })

        for(i = 0;i < points.length;i++){
            points[i].addEventListener('click',function(){
                var pointIndex = this.getAttribute('data-index')
                index = pointIndex;
                goIndex();
                time = 0;//計(jì)時(shí)器跳轉(zhuǎn)清零
            })
        }
        //計(jì)時(shí)器
        var timer;
        function play(){
         timer = setInterval(() => {
            time ++;
            if(time == 20 ){
                goRight();
                time = 0;
            }    
        },100)
    }
        play();
        //移入清除計(jì)時(shí)器
        all.onmousemove = function(){
            clearInterval(timer)
        }
       //移出啟動(dòng)計(jì)時(shí)器
        all.onmouseleave = function(){
            play();
        }
    </script>
</body>

</html>