htmlで画像を自動的にスクロールさせるコードはどう書けばいいですか

2年 ago
陽, 向宇
1 minute

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 を使用してアニメーションの重要なフレームを定義し、画像の初期位置とスクロール位置を設定します。

bannerAds