純粋な CSS を使用して画像カルーセルを実装する方法

実装アイデア:

(推奨学習: css クイック スタート)

• 同じものを準備しますsize 複数の画像

• 画像コンテナ内に表示する画像を横に並べる

• 画像コンテナの外側に表示コンテナを追加し、コンテナ サイズは画像のサイズです

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

注:

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

• カスタム アニメーション ステージは、画像の数

• アニメーションの各段階のオフセット値は画像サイズに関係します

• #最後の段階からの切り替え効果はありません画像をこの記事の例の最初の画像に移動します。1 つのアイデアは、最後の画像から 1 つずつ切り替えることです。最初の画像に移動

#HTML コード:

<div id="container">
    <div id="photo">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</div>

コード分析:

ここでは 3 つの img 要素が作成されています。img 要素の外側はピクチャ コンテナであり、ピクチャ コンテナの外側は表示コンテナです。

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 サイトの他の関連記事を参照してください。