js图片自动左右滚动代码

以下是一个使用JavaScript实现图片自动左右滚动的示例代码：

HTML部分

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片自动左右滚动</title>
    <style>
        #scrolling-container {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            position: relative;
        }

        #scrolling-content {
            display: inline-block;
            padding-left: 100%;
            animation: scrollLeft 10s linear infinite;
        }

        #scrolling-content img {
            width: 200px;
            height: auto;
            margin-right: 20px;
        }

        @keyframes scrollLeft {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-100%);
            }
        }
    </style>
</head>

<body>
    <div id="scrolling-container">
        <div id="scrolling-content">
            <img src="image1.jpg" alt="图片1">
            <img src="image2.jpg" alt="图片2">
            <img src="image3.jpg" alt="图片3">
            <!-- 可以添加更多图片 -->
        </div>
    </div>
</body>

</html>

基础概念解释

HTML结构：这里创建了一个容器#scrolling-container来包裹整个滚动区域，并且设置overflow: hidden隐藏超出容器的内容。内部的#scrolling-content包含了要滚动的图片元素。
CSS动画：通过@keyframes定义了一个名为scrollLeft的动画，从初始位置（translateX(0)）到向左平移容器宽度（translateX(-100%)）。然后将这个动画应用到#scrolling-content上，设置了动画持续时间（这里是10秒）、线性运动（linear）并且无限循环（infinite）。

优势

简单易行：不需要复杂的JavaScript逻辑来控制滚动，主要依靠CSS动画即可实现基本的左右滚动效果。
兼容性较好：现代浏览器都支持CSS动画相关的特性。

应用场景

轮播图的一种简单替代方案，在一些对交互要求不高，只需要展示图片流的地方可以使用，比如新闻网站底部的小图片滚动展示相关资讯图片。

可能遇到的问题及解决方法

图片加载延迟导致布局错乱：如果图片加载较慢，可能会影响滚动的初始布局。可以在图片标签上设置固定的宽高或者使用CSS的padding - bottom技巧（对于响应式图片布局）来预留空间。例如：
图片加载延迟导致布局错乱：如果图片加载较慢，可能会影响滚动的初始布局。可以在图片标签上设置固定的宽高或者使用CSS的padding - bottom技巧（对于响应式图片布局）来预留空间。例如：
滚动速度不适应不同屏幕宽度：可以根据容器宽度动态调整动画持续时间。在JavaScript中获取容器宽度，然后根据一定的比例计算动画时间。例如：
滚动速度不适应不同屏幕宽度：可以根据容器宽度动态调整动画持续时间。在JavaScript中获取容器宽度，然后根据一定的比例计算动画时间。例如：

类型拓展