2. CSS样式

接下来，我们使用CSS为图片添加滚动效果。这里以水平滚动为例：

.image-container {
  overflow-x: auto; /* 开启水平滚动 */
  white-space: nowrap; /* 防止图片换行 */
  width: 100%; /* 容器宽度 */
}
.image-container img {
  width: 200px; /* 单个图片宽度 */
  height: auto; /* 保持图片比例 */
  display: inline-block; /* 行内块级元素 */
  margin-right: 10px; /* 图片间隔 */
}

这段代码通过overflow-x: auto;属性使图片在水平方向上可以滚动。white-space: nowrap;防止图片在容器内换行。通过设置width和margin-right可以控制图片的排列和间距。

高级实现：JavaScript与CSS动画

1. JavaScript控制滚动速度与方向

你可以使用JavaScript来增加更多的交互性，例如控制滚动速度和方向：

向右滚动
向左滚动

  

const scrollContainer = document.getElementById('scrollContainer');
const scrollSpeed = 5; // 滚动速度（像素/秒）
let scrollDirection = 'right'; // 默认向右滚动
let currentScroll = 0; // 当前滚动位置（像素）
const maxScroll = scrollContainer.scrollWidth - scrollContainer.clientWidth; // 可滚动最大距离（像素）
const imgWidth = scrollContainer.children[0].clientWidth; // 单个图片宽度（像素）
const interval = setInterval(() => {
  if (scrollDirection === 'right' && currentScroll < maxScroll) {
    currentScroll += scrollSpeed; // 向右滚动，直到到达最大可滚动距离为止
  } else if (scrollDirection === 'left' && currentScroll > 0) { // 向左滚动，直到回到原点为止（可选）
    currentScroll -= scrollSpeed; // 注意这里可能需要调整逻辑以适应具体需求，例如每次减去一个固定的值等。目前仅为示意代码。