91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

html中圖片自動循環滾動代碼

小億
201
2023-12-20 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 屬性替換為你實際使用的圖片路徑。

0
天全县| 丽水市| 湘阴县| 宁晋县| 漳浦县| 邢台市| 五峰| 宣汉县| 大丰市| 东城区| 金沙县| 瑞金市| 左权县| 若尔盖县| 延寿县| 陇川县| 衡水市| 太湖县| 益阳市| 德江县| 苍溪县| 呼图壁县| 沧州市| 柳林县| 鱼台县| 长沙县| 攀枝花市| 娱乐| 昌吉市| 定结县| 招远市| 普陀区| 共和县| 普宁市| 辽中县| 富蕴县| 东山县| 屏山县| 合肥市| 洛南县| 通化县|