简单实现轮播图

简单实现轮播图

html部分

<div class="banner">
        <ul class="clearfix">
            <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>
        </ul>
        <span>&lt;</span>
        <span class="right">&gt;</span>
        <div class="btn">
            <button style="background-color: rgba(202, 200, 200,0.5);">1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
        </div>
    </div>

css部分

<style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .banner {
            width: 590px;
            height: 470px;
            margin: 40px auto;
            overflow: hidden;
            position: relative;
        }
        .banner>ul {
            width: 2360px;/*4张图片的宽度*/
            height: 470px;
            position: absolute;
            left: 0px;
            top: 0;
        }
        .banner>ul>li {
            float: left;
        }
        .banner>ul>li>img {
            width: 590px;
            height: 470px;
        }
        .banner>span {
            display: inline-block;
            width: 40px;
            height: 80px;
            line-height: 80px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #efefef;
            font-size: 50px;
            text-align: center;
            position: absolute;
            top: 200px;
            left: 0;
        }
        .banner .right {
            left: 550px;
        }
        .btn {
            width: 100px;
            height: 30px;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .btn button {
            width: 20px;
            height: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            color: rgb(202, 200, 200);
            border: none;
            outline: none;
        }
    </style>

js部分

    <script>
        onload = function () {
            let banner = document.querySelector(".banner")
            let ul = document.querySelector(".banner>ul")
            let span_arr = document.querySelectorAll(".banner>span")
            let btn_arr = document.querySelectorAll(".btn button")
            let l_span = span_arr[0]
            let r_span = span_arr[1]
            let start = 0                             //图片下标
            
            //提示数字点击切换
            for (let i = 0; i < btn_arr.length; i++) {
                btn_arr[i].onclick = function () {
                    ul.style.left = -590 * i + "px"
                    btn_arr[i].style.backgroundColor = " rgba(202, 200, 200,0.5)"
                    for (let k = 0; k < btn_arr.length; k++) {
                        if (k != i) {
                            btn_arr[k].style.backgroundColor = ""
                        }
                    }
                }
            }
            //右下角标记提示图片
            function move(){   
                    btn_arr[start].style.backgroundColor = "rgba(202, 200, 200,0.5)"
                    for (let k = 0; k < btn_arr.length; k++) {
                        if (k != start) {
                            btn_arr[k].style.backgroundColor = ""
                        }
                    }
            }

            //点击向右切换图片
            let interval = r_span.onclick = function () {
                start++
                if (start > btn_arr.length-1) {
                    start = 0
                }
                ul.style.left = -590 * start + "px"
                ul.style.transition = "left 1s";
                move()
            }

            //点击右边切换图片
            l_span.onclick = function () {
                start--
                if (start < 0) {
                    start = btn_arr.length-1
                }
                ul.style.left = -590 * start + "px"
                ul.style.transition = "left 1s";
                move()
            }
            // 向左边切换图片1.5s
            let times = setInterval(interval, 1500)

            //定时器暂停与启动
            banner.onmouseover = function () {
                clearInterval(times)
            }
            banner.onmouseout = function () {
                times = setInterval(interval, 1500)
            }


        }

有些小bug，基本完成了