ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSでスライド効果を実現するにはどうすればよいですか?スライドショーの実装方法(コード例)

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

青灯夜游
リリース: 2018-11-05 17:29:07
オリジナル
5293 人が閲覧しました

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

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

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

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

<div id="stage">
	<a href="img/1.jpg"><img src="img/1.jpg" width="640" height="400"></a>
	<a href="img/2.jpg"><img src="img/2.jpg" width="640" height="400"></a>
	<a href="img/3.jpg"><img src="img/3.jpg" width="640" height="400"></a>
	<a href="img/4.jpg"><img src="img/4.jpg" width="640" height="400"></a>
	<a href="img/5.jpg"><img src="img/5.jpg" width="640" height="400"></a>
	<a href="img/6.jpg"><img src="img/6.jpg" width="640" height="400"></a>
	<a href="img/7.jpg"><img src="img/7.jpg" width="640" height="400"></a>
	<a href="img/8.jpg"><img src="img/8.jpg" width="640" height="400"></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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート