JS实现图片无缝滚动效果

最新推荐文章于 2025-09-07 13:11:15 发布

原创

最新推荐文章于 2025-09-07 13:11:15 发布 · 5.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #滚动 #图片

本文介绍了如何使用JavaScript实现图片无缝滚动效果。通过图片复制并联排列，当滚动结束后将图片移回起点，实现无缝循环。内容包括：布局设置、元素获取、滚动函数、临界点判断、滚动速度控制及鼠标事件的添加。在实际操作中需要注意margin和padding的设置，以避免滚动bug。尽管完成基本效果，但仍有待完善。

首先，借助一张草图来简单说明一下往左移动的做法（往右相同）。
这里写图片描述
如上图所示，图片的无缝滚动原理其实是把滚动的图片复制成两份并联排列，当滚动完一次后就把图片扯回到起点，重新滚动。这里的往左运动把图片扯回起点的临界点是offsetLeft的绝对值大于offsetWidth/2的绝对值。

接着，我们再来看看具体实现的代码：
第一步：简单的布局，这里以外层的div为相对物设置相对定位并设置超出隐藏，再给里面的ul设置绝对定位，然后通过JS控制left和top的值来实现图片的移动。
要注意的是：无缝滚动图如果不设置margin和padding值为0会出现bug，图片衔接缺像素，两段图片移动完后会出现卡跳现象。新闻滚动如果不设置margin和padding为0，则会出现反向加速运动的bug。估计bug是因为所有元素间自动存在间隙，而设置的运动像素和内边距padding有关？会不会呢？谁知道。。。。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
    
    margin: 0;padding: 0;}
            #box{
    
    width: 800px;height: 150px;margin: 1

最低0.47元/天解锁文章