原生 JS 实现无缝轮播图（进阶版）

最新推荐文章于 2024-09-03 07:17:13 发布

emm_10_01

最新推荐文章于 2024-09-03 07:17:13 发布

阅读量264

点赞数 9

文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/emm_10_01/article/details/122549591

版权

实现效果：

在这里插入图片描述

完整代码

：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner {
            width: 1000px;
            border: 1px solid red;
            margin: 0 auto;
            position: relative;
            /* 隐藏溢出的图片 */
            overflow: hidden;
        }

        .item img {
            width: 200px;
            height: 300px;
            vertical-align: top;
        }

        .item {
            width: 200px;
            height: 300px;

        }

        .banner .wrap {
            width: 2000px;
            height: 300px;
            border: 1px solid green;
            display: flex;
            /* flex-grow: 1; */
            margin-left: 0px;
        }
    </style>
</head>

<body>

    <div class="banner">

        <div class="wrap">
            <div class="item">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/3.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/4.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/5.jpg" alt="">
            </div>
            <!-- 添加一组相同的图片来填充空白 -->
            <div class="item">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/2.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/3.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/4.jpg" alt="">
            </div>
            <div class="item">
                <img src="img/5.jpg" alt="">
            </div>
        </div>
    </div>

    <script>
        // 无缝滚动
        //移动初始量
        var leftOffsetx = 0;
        var wrap = document.querySelector(".wrap");

        function movingImg() {
            //判断要超出边界返回初始位置
            if (leftOffsetx >= 1000) {
                leftOffsetx = 0;
            } else {
                leftOffsetx++;
            }
            // wrap.style.transition ="margin-left 0.7s ease-in-out 0.2s"
            wrap.style.marginLeft = (-leftOffsetx) + "px"
        }
        //添加定时器自动滚动
        var t1 = setInterval("movingImg()", 10)
        wrap.onmouseover = function(){
            //鼠标划入停止定时器
            clearInterval(t1);
        }
        wrap.onmouseout = function(){
            //鼠标划出滚动继续
            t1=setInterval("movingImg()",10);
        }
    </script>
</body>

</html>