CSS を使用してレスポンシブ画像の自動カルーセル効果を実装するためのチュートリアル

モバイル デバイスの普及に伴い、Web デザインでは、優れたユーザー エクスペリエンスを実現するために、デバイスの解像度やさまざまな端末の画面サイズなどの要素を考慮する必要があります。 Web サイトのレスポンシブ デザインを実装する場合、画像カルーセル効果を使用して限られた視覚ウィンドウに複数の画像のコンテンツを表示することが必要になることがよくありますが、同時に Web サイトの視覚効果も高めることができます。この記事では、CSS を使用してレスポンシブ画像の自動カルーセル効果を実現する方法を紹介し、コード例と分析を示します。

実装のアイデア

レスポンシブ画像カルーセルの実装は、CSS フレックス レイアウトを通じて実現できます。固定コンテナーで、フレックス サブコンテナー内の各イメージを含むようにフレックス コンテナーをセットアップします。次に、フレックス サブコンテナの配置とサブ要素の幅を設定することにより、画像のタイル状の配置が実現されます。ただし、画面サイズが異なるとコンテナの幅が異なるため、メディア クエリを使用してコンテナとサブ要素の幅を動的に変更し、異なる画面解像度に適応させる必要があります。次にCSS3のアニメーション効果を設定することで自動カルーセル効果を実現し、jsでスライド効果を実現します。

実装手順

1. HTML 部分

まず、以下に示すように、HTML 部分に複数の画像を含むコンテナを作成する必要があります。

<div class="carousel-container">
  <div class="carousel-items">
    <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="">
    <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="">
    <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="">
    <img src="/static/imghw/default1.png"  data-src="image4.jpg"  class="lazy" alt="">
    <img src="/static/imghw/default1.png"  data-src="image5.jpg"  class="lazy" alt="">
  </div>
  <div class="carousel-prev"></div>
  <div class="carousel-next"></div>
</div>

このうち、.carousel-container はコンテナのスタイル名、.carousel-items は画像に含まれるサブコンテナのスタイル名、.carousel-prev と .carousel-next は左右の矢印のスタイルです。名前を付けた場合は、CSS セクションの [スタイルの設定] で使用します。

2. CSS パーツ

次に、コンテナ、サブコンテナ、矢印のスタイルを含む、CSS パーツのスタイルを設定する必要があります。具体的なコードは次のとおりです。

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.carousel-items {
  display: flex;
  flex-wrap: nowrap;
  width: 500%; /* 将子容器宽度扩大5倍 */
}

.carousel-items img {
  width: 20%;
  margin-right: 1rem;
  flex: 1;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

スタイル定義では、サブコンテナと矢印の絶対位置を実現するために、コンテナの相対位置を設定します。 overflow:hidden を使用すると、コンテナ内のサブコンテナのオーバーフロー部分を非表示にすることができます。サブコンテナはフレックス レイアウトを採用しており、nowrap 属性によりサブコンテナ要素の折り返しが防止されます。そして、サブコンテナの幅を 500% に設定します。サブコンテナ内の画像の幅を 20% に設定すると、各行に 5 枚の画像を表示でき、画像間のマージン右を 1rem に設定すると、表示効果がより美しくなります。左右の矢印は、絶対位置と負のマージントップによって垂直方向の中央に配置されます。

3. メディア クエリの応答属性の設定

画面サイズが異なる場合、コンテナとサブ要素の幅を動的に変更して、さまざまな画面解像度に適応する必要があります。以下に示すように、メディア クエリを通じてレスポンシブ プロパティを設定し、さまざまな画面サイズでコンテナとサブコンテナの幅を変更できます。

/* 根据不同屏幕尺寸改变样式 */
@media (max-width: 768px) {
  .carousel-items img {
    width: 50%;
  }
  .carousel-container {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .carousel-items img {
    width: 100%;
    margin-right: 0;
  }
  .carousel-container {
    height: 180px;
  }
}

上の例では、ウィンドウ サイズの変更に基づいてカルーセルを設定します。 - アイテム img およびカルーセル コンテナー スタイル。小さい画面では、各画像の幅を 50% に設定し、画像間に margin-right を設定せず、.crosso コンテナで高さを 250px に設定します。小さい画面では、画像を 100% に設定します。幅は次のとおりです。 .crosso コンテナでは 180px に設定されます。

4. CSS3 アニメーション

CSS3 アニメーションを使用すると、画像の自動カルーセル効果を実現できます。コード例は次のとおりです。上の例では、画像サブコンテナは 10 秒ごとにスクロールするように設定されています。アニメーションはカルーセル アニメーションによって完成します。線形はアニメーションが線形であることを意味し、無限はアニメーションが無限にループすることを意味します。

スライド効果を実現するための JavaScript

最後に、JavaScript を使用して、左右の矢印をクリックしたときに画像のスライド効果を実現します。コード例は次のとおりです。 :

@keyframes carousel-animation {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
  }
}

.carousel-items {
  /* 动画设置 */
  animation: carousel-animation 10s infinite linear;
}

.carousel-items:hover {
  /* 鼠标悬停时终止动画 */
  animation-play-state: paused;
}

上記の例では、querySelector を通じて左右の矢印要素を取得し、クリック イベントをバインドします。 carouselScroll 関数を使用して、クリックするたびに画像のスライド効果を実現します。 container.scrollWidth はサブコンテナの有効幅、container.clientWidth は表示幅を表し、コンテナの端までスクロールする場合は、スクロール位置が逆の位置に設定され、循環スクロールの効果が得られます。

概要

この記事では、CSS3 のフレックス レイアウトとアニメーション効果、および JavaScript を使用して左右の矢印のクリック イベントを実装し、レスポンシブ画像の自動カルーセルを正常に実装しました。効果。また、メディア クエリとホバー エフェクトを追加することで、よりリッチなレスポンシブ デザインを実現しました。コード例はある程度の汎用性があり、初心者の参考にもなります。

以上がCSS を使用してレスポンシブ画像の自動カルーセル効果を実装するためのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。