html中图片自动循环滚动代码怎么写 - 问答

要实现图片自动循环滚动的效果，可以使用HTML和CSS来实现。以下是一个简单的示例代码：

HTML代码：

<div class="slider">
  <img src="image1.jpg" alt="Image 1" class="slide">
  <img src="image2.jpg" alt="Image 2" class="slide">
  <img src="image3.jpg" alt="Image 3" class="slide">
</div>

CSS代码：

.slider {
  width: 300px; /* 设置滚动窗口宽度 */
  height: 200px; /* 设置滚动窗口高度 */
  overflow: hidden; /* 隐藏超出窗口的内容 */
}

.slide {
  width: 100%; /* 设置每个图片的宽度 */
  height: 100%; /* 设置每个图片的高度 */
  object-fit: cover; /* 缩放图片以适应容器大小 */
  animation: scroll 5s infinite; /* 设置动画效果 */
}

@keyframes scroll {
  0% {
    transform: translateX(0); /* 图片开始位置 */
  }
  33.33% {
    transform: translateX(-100%); /* 图片滚动到第二张位置 */
  }
  66.66% {
    transform: translateX(-200%); /* 图片滚动到第三张位置 */
  }
  100% {
    transform: translateX(0); /* 图片回到开始位置，形成循环 */
  }
}

在上述代码中，图片的路径可以根据实际情况进行修改。通过设置滚动窗口的宽度和高度以及图片的宽度和高度来控制滚动效果的外观。通过设置animation属性来实现图片的滚动动画，其中5s表示动画的持续时间，infinite表示动画无限循环。通过@keyframes来定义动画的关键帧，设置图片的初始位置和滚动位置。

0 赞

0 踩