原生JS无缝轮播图

轮播图地址.

JS原生代码实现无缝轮播图

css样式

// An highlighted block
* {
            margin: 0px;
            padding: 0px;
        }

        .imgbox {
            width: 1200px;
            height: 720px;
            margin: 100px auto;
            background: aqua;
        }

        .showbox {
            width: 1200px;
            height: 720px;
            overflow: hidden;
            position: relative;
        }

        .imglist {
            position: relative;
            height: 100%;
        }

        .imglist ul {
            position: absolute;
            height: 100%;
            display: inline-flex;
            transition: 1s;
        }

        .imglist ul li {
            width: 1200px;
            height: 720px;
            display: inline-block;
        }

        .imglist ul li img {
            width: 100%;
            height: 100%;
        }

        .button {
            top: 300px;
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
        }



        .btns {
            margin: 15px;
            box-sizing: border-box;
            padding: 10px 20px;
            height: 40px;
            border-radius: 20px;
            background-color: rgba(221, 221, 221, 0.548);
            text-align: center;
        }

        .btnlist ul {
            bottom: 20px;
            position: absolute;
            width: 100%;
            height: 8px;
            display: flex;
            justify-content: center;
        }

        .btnlist ul li {
            box-sizing: border-box;
            margin: 0 10px;
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.712);
            transition: .5s .5s;
        }

        .btnlist ul li:hover {

            width: 80px;
            transition: .5s;
            background-color: rgba(14, 145, 221, 0.836);
        }

        .btnlist ul li.current {
            width: 80px;
            background-color: rgba(14, 80, 221, 0.836);
        }

html内容

html内容
// An highlighted block
<div class="imgbox">
        <div class="showbox" id="showbox">
            <div class="imglist" id="imglist">
                <ul>
                    <li><img src="./img/01.jpg" alt=""></li>
                    <li><img src="./img/02.jpg" alt=""></li>
                    <li><img src="./img/03.jpg" alt=""></li>
                    <li><img src="./img/04.jpg" alt=""></li>
                    <li><img src="./img/05.jpg" alt=""></li>
                    <li><img src="./img/06.jpg" alt=""></li>
                </ul>

            </div>
            <div class="button">
                <div class="btn-left btns" id="btnleft">左边 </div>
                <div class="btn-right btns" id="btnright">右边 </div>
            </div>
            <div class="btnlist" id="btnlist">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

        </div>
    </div>

原生JS

原生JS
// An highlighted block
<script>
        var showbox = document.getElementById("showbox");
        var imgbox = document.getElementById("imglist").getElementsByTagName("ul")[0]
        var imglist = document.getElementById("imglist").getElementsByTagName("ul")[0].getElementsByTagName("li")
        var btns = document.getElementsByClassName("btn");
        var btnLeft = document.getElementById("btnleft");
        var btnRight = document.getElementById("btnright");
        var btnlist = document.getElementById("btnlist");
        imgbox.style.left = 0 + "px";

        //初始化
        btnLeft.style.display = "none";
        btnRight.style.display = "none";
        //鼠标移入盒子
        showbox.addEventListener("mouseover", function () {
            btnLeft.style.display = "block";
            btnRight.style.display = "block";
            /* btnlist.style.display = "block"; */
        })
        /* 鼠标移出盒子 */
        showbox.addEventListener("mouseout", function () {
            btnLeft.style.display = "none";
            btnRight.style.display = "none";
            /* btnlist.style.display = "none"; */
        })

        var index = 0;
        var i = imglist.length;
        //点击事件
        btnLeft.addEventListener("click", function () {
            goLeft();
        })
        btnright.addEventListener("click", function () {
            goRight();
        })


        //往左滚动函数
        function goLeft() {
            index++;
            if (index < i) {
                imgbox.style.left = -(index * 1200) + "px";
                ///* console.log(index); 
            } else {
                index = 0;
                imgbox.style.left = index + "px";
                // imgbox.style.transition = 0 + "s"; 
                // console.log(imgbox.style.left); 
            }
            // 按钮列表
            goList();
            //console.log(index, imgbox.style.left);
        }

        //往右滚动函数
        function goRight() {
            index--;
            if (index >= 0) {
                imgbox.style.left = -((index) * 1200) + "px";
                // console.log(index);
            } else {
                index = imglist.length-1;
                imgbox.style.left = -((index) * 1200) + "px";
                // imgbox.style.transition = 0 + "s";
                //console.log(index)
            }     
            // 按钮列表
            goList();
            //console.log(index, imgbox.style.left);     
        }
        // 封装按钮列表函数
        function goList() {
            for (let i = 0; i < list.length; i++) {
                list[i].classList.remove("current");
                list[index].classList.add("current");
            }
        }

        /* 获取按钮列表对象 */
        var list = document.getElementById("btnlist").getElementsByTagName("li");
        /* 初始化第一个按钮样式 */
        list[0].classList.add("current");
        for (let i = 0; i < list.length; i++) {
            list[i].addEventListener("click", function () {
                /* 索引图片位置 */
                imgbox.style.left = -(i * 1200) + "px";
                /* 清除按钮样式，添加点击按钮样式 */
                for (let j = 0; j < list.length; j++) {
                    list[j].classList.remove("current");
                }
                list[i].classList.add("current");
            })
        }


        /* 定时任务 */
        var goLoop;

        function goLooP() {
            goLoop = setInterval(() => {
                goLeft();
            }, 2500);
        }
        showbox.addEventListener("mouseover", function () {
            clearInterval(goLoop);
        })
        /* 鼠标移出盒子 */
        showbox.addEventListener("mouseout", function () {
            goLooP()
        })
    </script>