手把手教你用原生js实现无缝滚动

Mr.ERDUO

已于 2022-04-07 16:15:58 修改

阅读量5.5k

点赞数 4

分类专栏： js 文章标签： javascript css html

于 2022-04-07 16:13:17 首次发布

本文链接：https://blog.csdn.net/Devil_ErKang/article/details/123984069

版权

本文将手把手教你如何使用原生JavaScript实现无缝滚动效果。首先介绍整体思路，包括图片始终保持匀速运动，利用定时器调整图片容器的left值来实现滚动。接着详细讲解HTML布局和CSS样式，确保图片在滚动时不发生变形。最后，通过面向对象的方式编写JavaScript代码，包括初始化滚动、添加图片以及控制滚动速度的方法。整个过程清晰易懂，适合进阶JavaScript的开发者参考。

摘要由CSDN通过智能技术生成

效果展示

上图就是我们要实现的无缝滚动效果。

整体思路

按照惯例我们先来说一下思路，一开始图片静止，点击各个按钮，顾名思义都有相应的效果，无缝滚动最主要的效果就是图片一直保持匀速运动。点击向右按钮（点击事件），红色框框内（框框相对定位）的图片（图片绝对定位）开始滚动，不停止（定时器），这里所有图片应该用一个容器包裹起来绝对定位给到这个图片的父级容器，然后，设置一个定时器，获取图片父级容器的left，每运行一次定时器，增加一次或减少一次left，这样就可以做出向左或向右移动。

HTML布局思路与实现

用一个大盒子包裹上面的按钮容器和下面的图片滚动容器，然后在按钮容器里面写按钮，

图片滚动容器里面又包裹着包裹着图片的容器。

    <div class="box">
        <div class="box_btnBox">
            <button class="leftBtn">向左</button>
            <button class="rightBtn">向右</button>
            <button class="stopBtn">暂停</button>
            <button class="addSpeedBtn">加速</button>
            <button class="subSpeedBtn">减速</button>
            <button class="restoreBtn">速度还原</button>
        </div>
        <div class="box_imgBox">
            <div class="imgsBox">
                <img src="./images/img (1).png" alt="">
                <img src="./images/img (2).png" alt="">
                <img src="./images/img (3).png" alt="">
            </div>
        </div>
    </div>

CSS样式思路与实现

这里有个小技巧，为了不让我1920*1080的壁纸图片缩小后畸形，我先给imgsBox下的图片给个max-width:500px;

    .box .imgsBox img{
         max-width: 500px;
    }

然后在谷歌浏览器中按f12打开开发者工具，然后再按ctrl+shift+c打开元素检查工具，把光标放在图片上面，就会出现下图的图片宽高，然后我们后面根据缩小后的图片，来定义图片和容器的宽高，这样图片就不会畸形了。

我们先不写最大那个盒子的样式，我们先定义他下面两个容器的样式，下面我用class名代替盒子的名字。

我们先定义box_imgBox，这个容器是用来给imgsBox图片容器定位用的，我们先给他500像素的宽，280像素的高，10像素的边距，来个超过边框的内容隐藏，在加个相对定位。

        .box_imgBox {
            width: 500px;
            height: 280px;
            border: 10px solid red;
            overflow: hidden;
            position: relative;
        }

然后就是box_btnBox定义520像素的宽50像素的高，然后给个display：flex弹性布局（我超喜欢用弹性布局，很好用！！！），让按钮在box_btnBox中水平均匀分布（justify-content:space-between;）垂直居中(align-items:cen