CSS を使用して画像カルーセル効果を実現するにはどうすればよいですか? (コード例)

この記事では、CSS を使用して画像カルーセル効果を実現する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

[推奨チュートリアル: CSS ビデオ チュートリアル ]

理論的根拠

CSS3アニメーション プロパティと @keyframes ルール

主なアイデア

• 同じサイズの複数の画像を準備します

• 表示する画像を画像コンテナ内に水平に配置します

• #画像コンテナの外側に表示コンテナを追加します。表示コンテナのサイズは画像のサイズになります

• カスタム アニメーションを画像コンテナに追加し、アニメーションのさまざまな段階で増分オフセット値を設定します

注意事項

• アニメーション効果は、切り替えと停止の 2 つの部分に分かれています。

##カスタム アニメーション ステージは、画像の数に関連します
アニメーションの各ステージのオフセット値は画像のサイズに関連します。
アニメーションの最後の画像から最初の画像への切り替え効果はありません。この記事の例。1 つのアイデアは、最後の写真から最初の写真に 1 つずつ切り替えることです

HTML

<div id="container">
    <div id="photo">
        <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"   / alt="CSS を使用して画像カルーセル効果を実現するにはどうすればよいですか? (コード例)" >
        <img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy"   / alt="CSS を使用して画像カルーセル効果を実現するにはどうすればよいですか? (コード例)" >
        <img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy"   / alt="CSS を使用して画像カルーセル効果を実現するにはどうすればよいですか? (コード例)" >
    </div>
</div>

分析:

ここでは img 要素を 3 つ作成しており、img 要素の外側に Picture コンテナ、Picture コンテナの外側に Display コンテナがあります。

#CSS

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}
 
#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}
 
#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}
 
@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

分析:

表示コンテナのサイズは画像のサイズと一致しています

フロート効果を画像に追加する必要はありません。面倒なマージンの問題を考慮してください。
• この例には画像が 3 つしかないため、3 つのアニメーション ステージが追加され、各ステージはマージン左の値を増加させることで切り替え効果を実現します。
• 設定 アニメーションステージ(例:35%~60%)がアニメーション滞留部分、前ステージの空き時間(例:25%~35%)がアニメーション切り替え部分となります。各部分の長さは自分で制御する必要があります
• ランニング効果

プログラミング関連の知識については、 プログラミングビデオ

にアクセスしてください。 ！

以上がCSS を使用して画像カルーセル効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。