Js-带进度条的轮播图

带进度条的轮播图--原生JS实现

实现了图片自动轮播，左右按钮实现图片左右转换，下方原点或者缩小图点击选择其中的某一张图片，然后有红条实现图片的进度。

<div class="content">
        <div class="box1">
            <ul class="box1_1">
                <li><img src="./img/1.jpeg" alt="" style=" 640px"></li>
                <li><img src="./img/2.jpeg" alt="" style=" 640px"></li>
                <li><img src="./img/3.jpeg" alt="" style=" 640px"></li>
                <li><img src="./img/4.jpeg" alt="" style=" 640px"></li>
                <li><img src="./img/5.jpeg" alt="" style=" 640px"></li>
            </ul>
            <div class="box_left">&lt;</div>
            <div class="box_right">&gt;</div>
        </div>
        <p class="p1"></p>
        <div class="box2">
            <img src="./img/1.jpeg" alt="" style=" 16%" class="img2 img_border">
            <img src="./img/2.jpeg" alt="" style=" 16%" class="img2">
            <img src="./img/3.jpeg" alt="" style=" 16%" class="img2">
            <img src="./img/4.jpeg" alt="" style=" 16%" class="img2">
            <img src="./img/5.jpeg" alt="" style=" 16%" class="img2">
        </div>
    </div>

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 640px;
            height: auto;
            margin: 50px auto;
        }

        .box1 {
            width: 640px;
            height: 480px;
            position: relative;
            overflow: hidden;
        }

        .box1_1 {
            width: 3200px;
            height: 480px;
            list-style: none;
            position: absolute;
            top: 0;
            left: 0;
            transition: 0.7s;
        }

        li {
            float: left;
        }

        .box2 {
            width: 640px;
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            clear: both;
        }

        .box_left {
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            color: white;
            position: absolute;
            top: 200px;
            left: 20px;
            background-color: rgba(182, 178, 178, 0.5);
            border-radius: 9px;
            text-align: center;
            display: none;
        }

        .box_right {
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            color: white;
            position: absolute;
            top: 200px;
            right: 20px;
            background-color: rgba(182, 178, 178, 0.5);
            border-radius: 9px;
            text-align: center;
            display: none;

        }

        .p1 {
            width: 0%;
            height: 5px;
            background-color: red;
        }

        .img_border {
            border: 10px solid gray;
        }

        .box_left,
        .box_right{
            cursor: pointer;
        }
    </style>

<script>
        let ul = document.getElementsByClassName("box1_1")[0];
        let img2 = document.getElementsByClassName("img2");
        let box1 = document.getElementsByClassName("box1")[0];
        let content = document.getElementsByClassName("content")[0];
        let box_left = document.getElementsByClassName("box_left")[0];
        let box_right = document.getElementsByClassName("box_right")[0];
        let p1 = document.getElementsByClassName("p1")[0];

        let num = 0, stop,num1=0,stop1;

        let p_add = function(){
            p1.style.width = num1+"%";
            num1++;
            if(num1>100){
                p1.style.width = 0+"%";
                num1=0;
                clearInterval(stop1);
            }
        }

        let move = function () {
            stop1 = setInterval(p_add,19);
            num++;
            for (let i = 0; i < img2.length; i++) {
                if (i == num) {
                    img2[i].classList.add("img_border");
                    break;
                } else {
                    for (let i = 0; i < img2.length; i++) {
                        img2[i].classList.remove("img_border");
                    }
                }
            }
            ul.style.left = -num * 640 + "px";
            if (num == 5) {
                num = 0;
                ul.style.left = -num * 640 + "px";
                img2[num].classList.add("img_border");
            }
        }

        stop = setInterval(move, 2000);

        content.addEventListener("mouseover", function () {
            clearInterval(stop1);
            p1.style.width = 0+"%";
            clearInterval(stop);
            box_left.style.display = "block";
            box_right.style.display = "block";
        }, false);

        content.addEventListener("mouseout", function () {
            stop = setInterval(move, 2000);
            box_left.style.display = "none";
            box_right.style.display = "none";
        }, false);


        box_left.addEventListener('click', function () {
            num--;
            if(num==-1){
                num=4;
            }
            for(let i=0;i<img2.length;i++){
                img2[i].classList.remove("img_border");
            }
            img2[num].classList.add("img_border");
            ul.style.left = -num*640+"px";
        }, false);

        box_right.addEventListener('click', function () {
            num++;
            if(num==5){
                num=0;
            }
            for(let i=0;i<img2.length;i++){
                img2[i].classList.remove("img_border");
            }
            img2[num].classList.add("img_border");
            ul.style.left = -num*640+"px";
        }, false);

        for(let i=0;i<img2.length;i++){
            img2[i].index = i;
            img2[i].onclick = function(){
                num = this.index;
                for(let j=0;j<img2.length;j++){
                    img2[j].classList.remove("img_border");
                }
                img2[num].classList.add("img_border");
                ul.style.left = -num*640+"px";
            }
        }

        window.onblur = function(){
            clearInterval(stop1);
            p1.style.width = 0+"%";
            num1=0;
            clearInterval(stop);
        }

        window.onfocus = function(){
            stop = setInterval(move, 2000);
        }
        
    </script>