CSS を使用してシームレスなスクロール画像表示バー効果を作成する方法

CSS を使用してシームレスなスクロール画像表示バーを作成する方法

インターネットの発展に伴い、画像表示は多くの Web サイトのデザインに不可欠な部分になりました。シームレスなスクロール画像表示バー効果はユーザーの注目を集め、Web サイトの視覚効果とユーザー エクスペリエンスを向上させることができます。この記事では、CSS を使用してシームレスなスクロール画像表示バー効果を実現する方法と、具体的なコード例を紹介します。

画像表示バーのシームレスなスクロールを実現する効果は、主に CSS のアニメーション プロパティとレイアウトに依存します。この効果を実現する手順とコード例を以下に示します。

ステップ 1: HTML 構造の記述

まず、画像と表示領域を収容する HTML 構造を記述する必要があります。この例では、外側のコンテナとして div 要素を使用し、画像表示用のコンテナとして内側の ul 要素を使用します。 ul 要素内の各 li 要素はピクチャ項目です。

<div class="slideshow-container">
  <ul class="slideshow">
    <li><img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1"></li>
    <li><img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2"></li>
    <li><img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3"></li>
    <!-- 更多图片项 -->
  </ul>
</div>

ステップ 2: CSS スタイルの設定

次に、HTML 構造に CSS スタイルを設定し、シームレスなスクロールを実現できるようにする必要があります。まず、コンテナと表示領域のスタイルを設定する必要があります。

.slideshow-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slideshow {
  width: 100%;
  height: 100%;
  display: flex;
  animation: slide 10s infinite;
}

.slideshow li {
  flex-shrink: 0;
}

上の例では、コンテナの幅を 100% に設定し、オーバーフローしたコンテンツを非表示にします。表示領域は幅 100% に設定され、画像の水平配置を実現するためにインライン ブロック要素に設定されます。表示領域はCSSアニメーションプロパティのアニメーションを使用し、アニメーションの名前、継続時間、無限ループを設定します。

ステップ 3: JavaScript コードを追加する

最後に、シームレスなスクロール効果を実現するには、JavaScript を使用して画像の位置を操作する必要があります。以下は、表示領域の左側の値を変更することでスクロール効果を実現する簡単なサンプルコードです。

function slideImages() {
  var slideshow = document.querySelector('.slideshow');
  var firstImage = slideshow.querySelector('li');
  firstImage.addEventListener('transitionend', resetImagePosition);

  function resetImagePosition() {
    firstImage.style.transition = 'none';
    firstImage.style.transform = 'translateX(0)';
    setTimeout(startSlide, 0);
  }

  function startSlide() {
    firstImage.removeEventListener('transitionend', resetImagePosition);
    firstImage.style.transition = 'transform 5s ease-in-out';
    firstImage.style.transform = 'translateX(-100%)';
  }

  startSlide();
}

slideImages();

上記のコードでは、まず表示領域の要素と最初のピクチャの要素を取得し、次に最初のピクチャの遷移アニメーション終了イベントをリッスンします。トランジション アニメーションが終了すると、画像の位置をリセットし、新しいトランジション アニメーションを追加することで、シームレスなスクロール効果を実現します。

上記は、CSS を使用してシームレスなスクロール画像表示バー効果を作成するための具体的な手順とコード例です。独自のニーズに応じてカスタマイズおよび変更して、より豊かで多様な画像表示効果を実現できます。この記事がお役に立てば幸いです!

以上がCSS を使用してシームレスなスクロール画像表示バー効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。