原生js实现无缝轮播图

最新推荐文章于 2021-11-12 10:52:28 发布

小白彡不白

最新推荐文章于 2021-11-12 10:52:28 发布

阅读量263

点赞数

分类专栏：原生js

本文链接：https://blog.youkuaiyun.com/linglingzi001/article/details/105468699

版权

原生js 专栏收录该内容

16 篇文章

订阅专栏

这里使用匀速动画方法实现轮播图效果
animate.js部分

// 匀速动画方法
function Animation(ele, target) {
    // 先清除动画
    clearInterval(ele.tid);
    // 获取当前位置
    var currentLeft = ele.offsetLeft;
    // 判断左移右移
    var isLeft = (currentLeft < target);
    // 开启定时器
    ele.tid = setInterval(function () {
        // 移动
        currentLeft = isLeft ? currentLeft + 10 : currentLeft - 10;
        ele.style.left = currentLeft + "px";
        // 边界检测
        if (isLeft ? currentLeft >= target : currentLeft <= target) {
            // 停止运动
            clearInterval(ele.tid);
            // 元素复位
            ele.style.left = target + "px";
        }
    }, 15)
}

实现无缝轮播效果：
1。在图片盒子里最前面插入一最后一张图片，在最后面插入第一张图片
这样显示的第一张图片下标为1，
2.当第一张图点击上一页时，显示下标为0的图片也就是最后一张图片，
此时，将显示当前图片的全局变量index改为显示最后一张图片的下标
3.最后一张效果类似
看上去第一张点击上一张就平滑的向前移动到最后一张
实际上在一瞬间就回到了真正的最后一张
这样就形成了无缝轮播效果

<!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>Document</title>
    <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;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="screen">
            <ul>
                <li><img src="img/05.jpg" alt=""></li>
                <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/01.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();
        }

        // ol.addEventListener("click", function (e) {
        //     console.log(e.target.getAttribute("data-index"));
        // })

    </script>
</body>

</html>