js无缝滚动图片特效代码

要实现 JavaScript 无缝滚动图片特效，可以利用 CSS 动画结合 JavaScript 来控制图片的滚动。以下是一个完整的示例，包括 HTML、CSS 和 JavaScript 代码：

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动图片特效</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scrolling-wrapper">
        <div class="scrolling-content">
            <img src="image1.jpg" alt="图片1">
            <img src="image2.jpg" alt="图片2">
            <img src="image3.jpg" alt="图片3">
            <!-- 复制第一张图片以实现无缝滚动 -->
            <img src="image1.jpg" alt="图片1">
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS 样式 (`styles.css`)

.scrolling-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.scrolling-content {
    display: inline-block;
    animation: scroll-left 10s linear infinite;
}

.scrolling-content img {
    width: 300px; /* 根据需要调整图片宽度 */
    height: auto;
    margin-right: 20px; /* 图片之间的间距 */
}

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

JavaScript 控制 (`script.js`)

// 可选：动态调整动画速度根据图片数量
window.addEventListener('load', () => {
    const content = document.querySelector('.scrolling-content');
    const images = content.querySelectorAll('img');
    const imageCount = images.length - 1; // 减去复制的最后一张图片
    const duration = 10 + imageCount * 2; // 每张图片增加2秒
    content.style.animationDuration = `${duration}s`;
});

解释与优势

基础概念：
- CSS 动画：通过 @keyframes 定义动画的关键帧，实现元素的平滑移动。
- JavaScript 控制：动态调整动画持续时间，以适应不同数量的图片，确保滚动效果自然。

优势：
- 性能高效：利用 CSS3 动画，性能优于 JavaScript 定时器控制滚动。
- 易于维护：结构清晰，便于修改图片数量或调整动画效果。
- 无缝体验：通过复制第一张图片至末尾，实现视觉上的无缝滚动。
应用场景：
- 轮播图：适用于网站首页、产品展示等需要动态展示多张图片的场景。
- 广告横幅：在网站顶部或底部展示连续的广告图片。
- 新闻滚动：实时更新的新闻标题或信息流。
常见问题及解决方案：
- 图片加载延迟导致动画不流畅：
  - 原因：图片未完全加载前动画开始，导致布局抖动。
  - 解决方案：在所有图片加载完成后再启动动画，可以通过 JavaScript 监听 window.onload 或使用 Image 对象预加载图片。
- 动画速度不一致：
  - 原因：不同设备或浏览器对 CSS 动画的支持程度不同。
  - 解决方案：使用 requestAnimationFrame 进行动画控制，确保动画在各种环境下的一致性。