溫馨提示×

html中圖片自動循環(huán)滾動代碼怎么寫

小億
401
2023-11-15 13:18:04
欄目: 編程語言

要實現(xiàn)圖片自動循環(huán)滾動的效果，可以使用HTML和CSS來實現(xiàn)。以下是一個簡單的示例代碼：

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; /* 隱藏超出窗口的內(nèi)容 */
}

.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); /* 圖片回到開始位置，形成循環(huán) */
  }
}

在上述代碼中，圖片的路徑可以根據(jù)實際情況進行修改。通過設置滾動窗口的寬度和高度以及圖片的寬度和高度來控制滾動效果的外觀。通過設置animation屬性來實現(xiàn)圖片的滾動動畫，其中5s表示動畫的持續(xù)時間，infinite表示動畫無限循環(huán)。通過@keyframes來定義動畫的關鍵幀，設置圖片的初始位置和滾動位置。

0 踩