html中圖片自動(dòng)循環(huán)滾動(dòng)代碼

小億
217
2023-12-20 14:52:06
欄目: 編程語言

以下是一種實(shí)現(xiàn)圖片自動(dòng)循環(huán)滾動(dòng)的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 類設(shè)置了輪播容器的寬度、高度和溢出隱藏屬性。每個(gè)圖片都被設(shè)置為絕對(duì)定位，并通過 animation 屬性來應(yīng)用循環(huán)滾動(dòng)的動(dòng)畫。 @keyframes 定義了圖片在動(dòng)畫中的位置變化。每個(gè)逐幀動(dòng)畫的時(shí)間間隔為 10 秒，可以根據(jù)需要進(jìn)行調(diào)整。

你需要將 img 標(biāo)簽中的 src 屬性替換為你實(shí)際使用的圖片路徑。

0 踩