无缝轮播图本例固定为4张图的轮播图,主要为便于阐述原理.

原理

本例固定为4张图的轮播图,主要为便于阐述原理.

首先页面布局,重点实现如上图所示的滚动内容(board)结构

4fake的图片4的复制,1fake的图片1的复制,

通过设置上述滚动结构(board)的css left和transition 实现滚动效果实现无限滚动

当页面滚动到1fake 时,在滚动完成后,将left值设置到1的位置(此处没有动画,用户无法察觉);
同理,当页面滚动到4fake 时,在滚动完成后,将left值设置到4的位置(此处也没有动画);

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>carousel</title>
    <style>
        body {
            box-sizing: border-box;
        }

        .carousel {
            position: relative;
            width: 400px;
            height: 300px;
            /* overflow-x: scroll; */
            overflow: hidden;
        }

        .carousel-board {
            /* position: absolute; */
            position: relative;
            list-style: none;
            width: 5000px;
            height: 300px;
            padding: 0;
            left: 0;
            /* transition: left 0.5s linear; */

        }

        .carousel-board-item {
            float: left;
            width: 400px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 30px;
        }

        .carousel-btn {
            position: absolute;
            z-index: 100;
            cursor: pointer;
        }

        .carousel-prev {
            top: 50%;
            left: 10px;
        }

        .carousel-next {
            top: 50%;
            right: 10px;
        }

        .carousel-dots {
            padding: 0;
            /* width: 100px; */
            list-style: none;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -24px;
            z-index: 100;
        }

        .carousel-dots li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #aaa;
            margin-right: 4px;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <ul class="carousel-board">
            <li class="carousel-board-item" style="background-color:green">4</li>
            <li class="carousel-board-item" style="background-color:red">1</li>
            <li class="carousel-board-item" style="background-color:yellow">2</li>
            <li class="carousel-board-item" style="background-color:blue">3</li>
            <li class="carousel-board-item" style="background-color:green">4</li>
            <li class="carousel-board-item" style="background-color:red">1</li>
        </ul>
        <span class="carousel-btn carousel-prev">
            <</span> <span class="carousel-btn carousel-next">>
        </span>
        <ul class="carousel-dots">
            <li date-index="1"></li>
            <li date-index="2"></li>
            <li date-index="3"></li>
            <li date-index="4"></li>
        </ul>
    </div>
    <script>
        (function () {
            let prev = document.getElementsByClassName("carousel-prev")[0];
            let next = document.getElementsByClassName("carousel-next")[0];
            let board = document.getElementsByClassName("carousel-board")[0];
            let panels = Array.from(document.getElementsByClassName('carousel-board-item'))
            board.style.left = "-400px";
            let index = 1; //设置默认的index值
            prev.addEventListener("click",throttle(function () {
                index++
                console.log(index);
                animate(-400);
                //如果当前在 1fake 的位置
                if (index === panels.length - 1) {

                    setTimeout(() => {
                        console.log("settimeout")
                        board.style.transition = "0s";
                        let width = 4 * 400
                        board.style.left = parseInt(board.style.left) + width + "px"
                    }, 600)
                    index = 1;
                }

            }, 500) )
            next.addEventListener("click",throttle( () => {
                index--
                console.log(index);
                animate(400);
                if (index === 0) {
                    console.log("settimeout")
                    setTimeout(() => {
                        board.style.transition = "0s";
                        let width = -4 * 400
                        board.style.left = parseInt(board.style.left) + width + "px"
                    }, 600)
                    index = 4;
                }
            }, 500))

            function animate(width = 400) {
                board.style.transition = "0.5s";
                board.style.left || (board.style.left = 0)
                board.style.left = parseInt(board.style.left) + width + "px";
            }

           // 节流函数 防止点击过快出现空白
            function throttle(func, wait) {
                var context, args;
                var previous = 0;

                return function() {
                    var now = new Date();
                    context = this;
                    args = arguments;
                    if (now - previous > wait) {
                        func.apply(context, args);
                        previous = now;
                    }
                }
            }
        })()
    </script>
</body>

</html>