js实现轮播图

功能：

图片自动转换，左右箭头点击实现图片切换，小圆点也能实现图片切换

HTML:<div class="contenter">
        <ul>
            <li><img src="./img/1.jpeg" alt="" width="640" height="480"></li>
            <li><img src="./img/2.jpeg" alt="" width="640" height="480"></li>
            <li><img src="./img/3.jpeg" alt="" width="640" height="480"></li>
            <li><img src="./img/4.jpeg" alt="" width="640" height="480"></li>
            <li><img src="./img/5.jpeg" alt="" width="640" height="480"></li>
        </ul>
        <a href="javascript:;" class="arrow pre">&lt;</a>
        <a href="javascript:;" class="arrow next">&gt;</a>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

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

        .contenter {
            width: 640px;
            height: 480px;
            margin: 0 auto;
            position: relative;
            top: 50px;
            box-shadow: 0 0 4px 4px #ccc;
            overflow: hidden;
        }

        .contenter ul {
            width: 3200px;
            height: 480px;
            position: absolute;
            left: 0;
            top: 0;
            transition: 0.7s;
        }

        .contenter ul li {
            float: left;
        }

        .contenter .arrow {
            width: 40px;
            height: 40px;
            border-radius: 9px;
            position: absolute;
            top: 200px;
            background-color: rgba(255, 255, 255, 0.4);
            font-size: 18px;
            color: white;
            text-align: center;
            text-decoration: none;
            line-height: 40px;
            transition: 0.3s;
        }

        .pre {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        .contenter .arrow:hover {
            background-color: rgba(204, 204, 204, 0.801);
        }

        .contenter ol {
            width: 150px;
            position: absolute;
            bottom: 10px;
            left: 270px;
        }

        .contenter ol li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0 5px;
            background-color: rgba(255, 255, 255, 0.4);
            float: left;
            position: relative;
            top: 4px;
            cursor: pointer;
        }

        .contenter ol li.active {
            width: 20px;
            height: 20px;
            background-color: rgba(204, 204, 204, 0.801);
            top: 0;
        }
    </style>

JS：
<script>
        let contenter = document.getElementsByClassName("contenter")[0];
        let ul = document.getElementsByTagName("ul")[0];
        let dots = document.getElementsByTagName("ol")[0].getElementsByTagName("li");
        let pre = document.getElementsByClassName("pre")[0];
        let next = document.getElementsByClassName("next")[0];

        let n = 0, stop;

        let animate = function () {
            n++;
            if (n == dots.length) {
                n = 0;
                ul.style.left = -640 * n + "px";
            }
            for (let i = 0; i < dots.length; i++) {
                dots[i].className = "";
            }
            dots[n].className = "active";
            ul.style.left = -640 * n + "px";
        }

        stop = setInterval(animate, 1500);

        contenter.onmouseenter = function () {
            clearInterval(stop);
        }
        contenter.onmouseleave = function () {
            stop = setInterval(animate, 1500);
        }

        for (let i = 0; i < dots.length; i++) {
            dots[i].index = i;
            dots[i].onclick = function () {
                n = this.index;
                for (let j = 0; j < dots.length; j++) {
                    dots[j].className = "";
                }
                this.className = "active";
                ul.style.left = -640 * n + "px";
            }
        }

        pre.onclick = function(){
            n--;
            if(n==-1){
                n=4;
            }
            for(let i=0;i<dots.length;i++){
                dots[i].className = "";
            }
            dots[n].className = "active";
            ul.style.left = -640*n+"px";
        }
        next.onclick = function(){
            n++;
            if(n==dots.length){
                n=0;
            }
            for(let i=0;i<dots.length;i++){
                dots[i].className = "";
            }
            dots[n].className = "active";
            ul.style.left = -640*n+"px";
        }
    </script>

图片效果：

 

来源：https://www.cnblogs.com/CccK-html/p/11432661.html