原生js实现无缝轮播图

2022-07-31 22:20:37

这里使用匀速动画方法实现轮播效果

js部分

实现无缝轮播效果

1、在图片盒子最前面放入最后一张图片，在图片盒子最后面放入第一张图片，这样显示的图片下标第一张为1最后一张0；

2、当点击第一张时，显示的是最后一张，也就是图片index的下标改变

3、点击最后一张的效果与点击第一张的差不多，唯独改变了下标

看上去第一张点击时就平滑向前移动到最后一张，实际上在一瞬间回到第一张，这样就实现了无缝轮播的效果

<style>
        ul,
        ol {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #box {
            position: relative;
            margin: 100px auto;
            width: 510px;
            height: 210px;
            border: 1px solid;
        }
        
        .screen {
            position: relative;
            width: 500px;
            height: 200px;
            margin: 5px;
            overflow: hidden;
        }
        /* 图片盒子 */
        
        .screen ul {
            position: absolute;
            left: -500px;
            top: 0;
            width: 3500px;
        }
        
        .screen ul li {
            float: left;
        }
        /* 图片下标盒子 */
        
        .screen ol {
            position: absolute;
            bottom: 10px;
            right: 10px;
            height: 30px;
        }
        
        .screen ol li {
            float: left;
            width: 20px;
            height: 20px;
            margin-left: 10px;
            background-color: #fff;
            text-align: center;
            color: #000;
            cursor: pointer;
        }
        
        .screen ol .current {
            background-color: aqua;
            color: #fff;
        }
        
        .left,
        .right {
            display: none;
            position: absolute;
            top: 70px;
            width: 30px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #000;
            font-family: "simsun", "宋体";
            font-weight: 700;
            font-size: 30px;
            color: #fff;
            opacity: .3;
            cursor: pointer;
        }
        
        .left {
            left: 5px;
        }
        
        .right {
            right: 5px;
        }
        
        #box:hover .left,
        #box:hover .right {
            display: block;
        }
        
        .left:hover,
        .right:hover {
            opacity: .5;
        }
        
        img {
            width: 500px;
            height: 200px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="screen">
            <ul>
                <li><img src="./img/timg (5).jpg" alt=""></li>
                <li><img src="./img/timg (1).jpg" alt=""></li>
                <li><img src="./img/timg(2).jpg" alt=""></li>
                <li><img src="./img/timg (3).jpg" alt=""></li>
                <li><img src="./img/timg (4).jpg" alt=""></li>
                <li><img src="./img/timg (5).jpg" alt=""></li>
                <li><img src="./img/timg (1).jpg" alt=""></li>
            </ul>
            <ol>
                <li data-index="0" class="current">1</li>
                <li data-index="1">2</li>
                <li data-index="2">3</li>
                <li data-index="3">4</li>
                <li data-index="4">5</li>
            </ol>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>

    <script src="animation.js"></script>
    <script>
        // 获取元素
        var box = document.getElementById("box"); // 外层大盒子
        var screen = document.getElementsByClassName("screen")[0];
        var ul = screen.children[0]; // 图片盒子
        var ol = screen.children[1]; // 图片下标盒子
        var left = document.getElementsByClassName("left")[0];
        var right = document.getElementsByClassName("right")[0];

        var timeID = null; // 定时器id
        var index = 1; // 显示的第一张图片下标变量

        // 注册事件

        function goPre() {
            // 判断是第一张 回到最后一张
            if (index == 0) {
                ul.style.left = -(ul.children.length - 2) * screen.offsetWidth + "px";
                index = ul.children.length - 2;
            }
            // 索引--
            index--;
            // 图片动画
            Animation(ul, -index * screen.offsetWidth);
            // 显示下标
            showIndex();
        }

        function goNext() {
            // 判断是最后一张 回到第一张
            if (index == ul.children.length - 1) {
                ul.style.left = "-500px";
                index = 1;
            }
            // 索引++
            index++;
            // 图片运动动画
            Animation(ul, -index * screen.offsetWidth);
            // 显示下标
            showIndex();
        }

        // 鼠标点击下一页
        right.onclick = function() {
            goNext()
        };
        // 鼠标点击上一页
        left.onclick = function() {
            goPre()
        };

        // 显示下标方法
        function showIndex() {
            // 设置页码背景颜色 (第一张下标为1)
            for (let i = 0; i < ol.children.length; i++) {
                if ((index - 1) == i) {
                    ol.children[i].className = "current";
                } else {
                    ol.children[i].className = "";
                }
            }
            // 第0张和最后一张特殊设置
            if (index == 0) { // 显示最后一张
                ol.children[ol.children.length - 1].className = "current";
            } else if (index == ul.children.length - 1) { // 显示第一张
                ol.children[0].className = "current";
            }
        }

        // 点击下标显示对应图片
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].onclick = function() {
                Animation(ul, -(i + 1) * screen.offsetWidth);
                index = (i + 1);
                showIndex();
            }
        }

        // 定时轮播方法
        function startLB() {
            timeID = setInterval(function() {
                goNext();
            }, 2000);
        }

        function stopLB() {
            clearInterval(timeID);
        }
        // 开始轮播
        startLB();

        // 鼠标移入停止轮播
        box.onmouseenter = function() {
                stopLB();
            }
            // 鼠标移除继续轮播
        box.onmouseleave = function() {
            startLB();
        }

效果图


最后一张向第一张平滑

原生js实现无缝轮播图

码农公寓

相关文章