图片不断向左循环滚动js特效代码

要实现图片不断向左循环滚动的JavaScript特效，可以使用CSS动画结合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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scrolling-wrapper">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <!-- 添加更多图片 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body {
    margin: 0;
    overflow: hidden;
}

.scrolling-wrapper {
    display: flex;
    animation: scrollLeft 20s linear infinite;
}

.scrolling-wrapper img {
    width: 200px; /* 根据需要调整图片宽度 */
    height: auto;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

JavaScript代码

// script.js
document.addEventListener("DOMContentLoaded", function() {
    const wrapper = document.querySelector('.scrolling-wrapper');
    const images = wrapper.querySelectorAll('img');

    // 复制第一张图片到最后，以实现无缝循环
    const firstImage = images[0].cloneNode(true);
    wrapper.appendChild(firstImage);

    // 调整动画持续时间以匹配图片数量和速度
    const imageWidth = images[0].offsetWidth;
    const totalImages = images.length;
    const duration = (totalImages + 1) * 2; // 每张图片显示2秒
    wrapper.style.animationDuration = `${duration}s`;
});

解释

HTML结构：创建一个包含图片的容器div，并为其添加一个类名scrolling-wrapper。
CSS样式：
- 使用flex布局使图片水平排列。
- 定义一个名为scrollLeft的关键帧动画，使容器从右向左移动。
- 设置动画持续时间为20秒，并设置为无限循环。