CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）

この記事の内容は、CSSでスライド効果を実現する方法を紹介するものです。スライドショーの実装方法（コード例）。困っている友人は参考にしていただければ幸いです。

以下では、コードを使用してスライドの切り替え (フェードインとフェードアウト) の効果を段階的に実装します。

1. HTML ファイルを作成し、デモを作成します#。

# #まず、div ボックスに含まれる画像リストをページに設定する必要があります。次のようなものです:

<div id="stage">
	<a href="img/1.jpg"><img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）" ></a>
	<a href="img/2.jpg"><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）" ></a>
	<a href="img/3.jpg"><img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）" ></a>
	<a href="img/4.jpg"><img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）" ></a>
	<a href="img/5.jpg"><img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）" ></a>
	<a href="img/6.jpg"><img  src="/static/imghwm/default1.png"  data-src="img/6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）" ></a>
	<a href="img/7.jpg"><img  src="/static/imghwm/default1.png"  data-src="img/7.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）" ></a>
	<a href="img/8.jpg"><img  src="/static/imghwm/default1.png"  data-src="img/8.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）" ></a>
</div>

この例では、すべての画像にリンクがありますが、これは必須ではありません。リンクを削除する場合は、CSS と JavaScript を変更して、「a」の代わりに「img」を参照するだけです。

2. CSS を使用して画像をオーバーレイする

次のデモで使用した CSS コードは次のとおりです。 link 位置:absolute の場合、ドキュメント ストリームからすべての画像を取り出し、それらをまとめてスタックします。次に、#stage の幅と高さを指定して、ページ上にスライド ショー用のスペースを確保する必要があります。これは、画像の寸法にパディング (各辺 10 ピクセル) と境界線 (各辺 1 ピクセル) を加えたものと等しくなります。

次に、いくつかの nth-of-type() セレクターを使用して、最初の画像をスタックの一番上に置き、2 番目の画像をスタックの後ろに置き、残りの画像を表示から非表示にします。

最後に、アニメーション キーフレームを上の画像に割り当て、フェードアウトするまで 4 秒待つように指示し、不透明度: 0 を設定します。現時点で不足しているのは、次の画像が表示され、順番にフェードアウトできるように、向かい合う画像をスタックの一番下に移動するちょっとした JavaScript だけです。

3. JavaScript を使用してエフェクトをトリガーする

ここで必要なのは、キーフレーム アニメーションの終了時にトリガーされるイベント ハンドラーを画像に割り当てることだけです。最も重要な写真を取り出して後ろに移動します:

#stage {
    margin: 1em auto;
    width: 382px;
    height: 292px;
  }

  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

一番上の新しい画像は、キーフレーム アニメーション --fader などを含む nth-of-type(1) 属性であると想定されます。その他の画像について。 ＃＃＃＃＃＃それでおしまい！肥大化したコード、プラグイン、ライブラリは一切なく、最新のすべてのブラウザで動作する数行のバニラ JavaScript だけです。

4. レンダリング:

上記のコードを実行して、単純なフェードインおよびフェードアウトのスライドショーを取得します:

# #まとめ : 上記はこの記事で実現したフェードインとフェードアウトのスライド効果ですので、ご自身で試していただき、学習に役立てていただければ幸いです。

以上がCSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。