js实现轮播图自动轮播

我带你们飞

9803人浏览 · 2022-08-16 22:33:39

我带你们飞 · 2022-08-16 22:33:39 发布

咱们今天看下怎么实现轮播图的自动轮播，用原生js，

一、思路

首先，我们要对要实现的功能有一个明确的认知，知道了功能才能够实现相应的逻辑
完整的轮播图需要具备的功能有：
1、点击左右浮块实现单张图片切换
2、在图片切换的同时底部圆点同时更新
3、点击圆点切换到对应的图片
定义一个图片切换函数，通过判断形参的类型，实现不同的切换需求，如果形参是布尔值，则实现单张图片切换，如果形参是下标，则实现多张图片切换，在图片切换的尾部调用圆点更新函数
圆点更新函数：同样判断形参的类型，如果是布尔值，每次跳变一个，如果是数字，则跳到对应的圆点，这里使用排他法更新小圆点。

html部分

<!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>轮播图之自动轮播</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .box {
            position: relative;
            margin: 30px auto;
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
        
        #parent {
            width: 600px;
            height: 400px;
            overflow: hidden;
        }
        
        #child {
            width: 2400px;
            height: 400px;
        }
        
        #child>img {
            width: 600px;
            height: 400px;
            display: block;
            float: left;
        }
        
        #leftBtn,
        #rightBtn {
            position: absolute;
            top: 170px;
            width: 40px;
            height: 60px;
            background-color: black;
            opacity: 0.3;
            color: white;
            text-align: center;
            line-height: 60px;
            font-size: 30px;
        }
        
        #leftBtn {
            left: 0;
        }
        
        #rightBtn {
            right: 0;
        }
        
        #dotted {
            position: absolute;
            left: 60px;
            top: 350px;
            width: 120px;
            height: 30px px;
            border: 1px solid blue;
        }
        
        #dotted>li {
            float: left;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            box-sizing: border-box;
        }
        
        #dotted>li:nth-child(2),
        #dotted>li:nth-child(3),
        #dotted>li:nth-child(4) {
            border-left: 1px solid blue;
        }
    </style>
</head>

<body>
    <!-- 大盒子 -->
    <div class="box">
        <!-- 轮播图盒子 -->
        <div id="parent">
            <div id="child">
                <img src="images/1.jpg" alt="">
                <img src="images/2.jpg" alt="">
                <img src="images/3.jpg" alt="">
                <img src="images/4.jpg" alt="">
            </div>
        </div>
        <!-- 左右按钮 -->
        <div id="leftBtn">左</div>
        <div id="rightBtn">右</div>
        <!-- 四个小点 -->
        <ul id="dotted">
            <li style="background-color: red;">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>

</html>

js部分

<script>
    /*     轮播图的原理：
        子元素的宽度是父元素的4倍， 向左滚动产生scrollLeft值，
        隔一段时间， 让父元素的scrollLeft的值每次累加图片的width */

    var parent = document.getElementById("parent"); //轮播图父元素
    var imgObj = document.getElementById("child").getElementsByTagName("img")[0]; //第一个张图片
    var dottedArr = document.getElementById("dotted").getElementsByTagName("li");
    var btnLeft = document.getElementById("leftBtn");
    var rightBtn = document.getElementById("rightBtn");

    var num = 0; //控制整个轮播图
    var timerClock = null;
    clock();
    // 封装一个自动轮播函数
    // console.log(imgObj.clientWidth);
    console.log(parent.scrollLeft);
    // 0-3
    function clock() {
        /*  num++;
         console.log(num); */
        timerClock = setInterval(moveClock, 2000)
    }

    function moveClock() {
        num++;
        if (num > 3) {
            num = 0;
        }
        if (num < 0) {
            num = 3;
        }
        // parent.scrollLeft = parent.scrollLeft + imgObj.clientWidth;
        // parent.scrollLeft = imgObj.clientWidth * num;
        // 调用慢点走的函数
        slowMove(parent.scrollLeft, imgObj.clientWidth * num)
            // 0
            // 600
            // 1200
            // 1800
            // 调用小点背景颜色改变
        changeBgcolor();
        console.log(parent.scrollLeft);

    }
    // 实现缓慢轮播，parent.scrollLeft，每次走60px
    function slowMove(start, end) {
        var step = 0;
        var stepMax = 10;
        var everyStep = (end - start) / stepMax //每一步走60px
        var timer = setInterval(function() {
            step++;
            if (step <= stepMax) {
                parent.scrollLeft = parent.scrollLeft + everyStep;
            } else {
                clearInterval(timer);
            }
        }, 50)
    }
    // 单击四个小点实现轮播
    // 给四个小点绑定单击事件，通过遍历循环方便
    for (var i = 0; i < dottedArr.length; i++) {
        dottedArr[i].onclick = function() {
            console.log(this);
            // 时间一直在走，2000毫秒，一直在消耗，单击前、单击时……   清除自动轮播计时器
            clearInterval(timerClock); // timerClock is not defined
            // 这个循环是判断一下单击时小点是否是当前的小点
            for (var j = 0; j < dottedArr.length; j++) {
                if (this == dottedArr[j]) {
                    console.log(j);
                    // j:0-3
                    num = j;
                    slowMove(parent.scrollLeft, imgObj.clientWidth * num)
                        // 调用小点背景颜色改变
                    changeBgcolor();
                }
            }
            // 单击之后再次启用自动轮播
            clock();
        }

    }
    // 声明一个小点背景色改变的函数
    function changeBgcolor() {
        for (var i = 0; i < dottedArr.length; i++) {
            dottedArr[i].style.backgroundColor = "";
        }
        // num  0-3
        // i    0-3
        dottedArr[num].style.backgroundColor = "red";
    }
    // 单击右按钮
    rightBtn.onclick = function() {
            // num++;
            clearInterval(timerClock); // timerClock is not defined
            /*   num++;
              if (num > 3) {
                num = 0;
              }
              slowMove(parent.scrollLeft, imgObj.clientWidth * num)
              changeBgcolor(); */
            moveClock()
                // 单击之后再次启用自动轮播
            clock();
        }
        // 单击左按钮
    leftBtn.onclick = function() {
        clearInterval(timerClock); // timerClock is not defined
        num -= 2;
        moveClock()

        // 单击之后再次启用自动轮播
        clock();
    }
</script>