html中图片自动循环滚动代码-开发者知识库平台

html中图片自动循环滚动代码

html

890

2023/12/1 14:52:06

栏目: 编程语言

以下是一种实现图片自动循环滚动的HTML代码：

<!DOCTYPE html>
<html>
<head>
<style>
.carousel {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  animation: carousel-animation 10s infinite;
}

@keyframes carousel-animation {
  0% {left: 0;}
  25% {left: -100%;}
  50% {left: -200%;}
  75% {left: -300%;}
  100% {left: -400%;}
}
</style>
</head>
<body>
<div class="carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>
</body>
</html>

在上述代码中，.carousel 类设置了轮播容器的宽度、高度和溢出隐藏属性。每个图片都被设置为绝对定位，并通过 animation 属性来应用循环滚动的动画。 @keyframes 定义了图片在动画中的位置变化。每个逐帧动画的时间间隔为 10 秒，可以根据需要进行调整。

你需要将 img 标签中的 src 属性替换为你实际使用的图片路径。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

html中图片自动循环滚动代码

最新知识库

相关标签