js+div实现图片滚动效果代码

以下是一个使用HTML、CSS和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="scroll-container">
    <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`)**:


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

.scroll-container img {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    animation: scroll 10s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

**JavaScript部分 (`script.js`)**:

虽然在这个简单的例子中，CSS动画已经足够实现图片滚动效果，但如果你需要更复杂的控制（如手动控制滚动速度、暂停等），你可能需要添加JavaScript。然而，对于基本需求，上述CSS动画已经足够。

**注意**：

- 替换`src="image1.jpg"`等为你自己的图片路径。

- 你可以通过调整`@keyframes scroll`中的`animation-duration`（这里是`10s`）来改变滚动速度。

- CSS动画的`infinite`关键字使得图片滚动会无限循环。

- 如果你的图片不是同样的大小或宽高比，可能需要调整CSS以确保它们正确显示。

这个示例提供了基本的图片滚动效果，你可以根据需求进一步定制和优化。