jquery不间断滚动图片效果

封面图 • 2025-09-20 • JavaScript

要实现一个不间断滚动的图片效果，可以使用 jQuery 来控制滚动行为。以下是一个简单的示例代码，展示如何创建一个不间断滚动的图片效果。

### HTML 结构

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 不间断滚动图片</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .scroll-container {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .scroll-content {
            display: flex;
            animation: scroll-left 5s linear infinite;
        }
        .scroll-content img {
            margin-right: 20px;
            height: 100px;
        }
        @keyframes scroll-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
    </style>
</head>
<body>

startScrolling();
    });
</body>
</html>
```

### 解释：

1. **HTML 结构**：
   - `scroll-container` 是包含滚动内容的容器。
   - `scroll-content` 包含所有需要滚动的图片。

2. **CSS 样式**：
   - `.scroll-container` 设置了 `overflow: hidden`，以隐藏超出容器的内容。
   - `.scroll-content` 使用了 `flex` 布局，并通过 CSS 动画 `scroll-left` 实现了图片从右向左的滚动效果。

3. **jQuery 实现**：
   - 使用 `animate()` 方法来模拟滚动效果。
   - 每当动画完成时，将第一个图片移动到容器的末尾，从而实现不间断滚动的效果。

### 运行方式：
1. 将图片替换为你自己的图片路径（如 `image1.jpg`, `image2.jpg` 等）。
2. 打开浏览器查看效果。

这个示例展示了如何使用 jQuery 和 CSS 来实现一个不间断滚动的图片效果。你可以根据需求调整滚动速度、图片数量等参数。

不间断滚动图片效果