HTML と CSS を使用してスライドショーを作成する

一般に、開発者は JavaScript を使用して HTML コードに動作を追加します。場合によっては、CSS を使用して HTML コードに動作を追加することもできます。たとえば、次を使用してスライドショーを作成できます。 HTML で JavaScript を使用するのではなく、HTML と CSS を使用します。

カスタム キーフレームを作成してスライドをアニメーション化し、スライドショーを作成できます。 ＃＃＃文法＃＃＃

ユーザーは次の構文に従って、HTML と CSS のみを使用してスライドショーを作成できます。

リーリー

上記の構文では、「slides」div に複数のスライドが含まれています。 「スライド」 div の幅は、それに含まれるスライドの合計数に基づいて定義します。さらに、スライドショー div にアニメーションを追加しました。

スライドショーのキーフレームで、「margin-left」CSS プロパティの値を変更してスライドを変更します。

＃＃＃ステップ＃＃＃

ステップ 1

- div 要素を作成し、「親」クラス名を付けます。

ステップ 2 – ネストされた div 要素を作成し、「slides」クラス名を指定します。さらに、スライドを表す「element」クラス名を持つ複数のネストされた div 要素を作成します。

ステップ 3

– また、スライドのコンテンツをクラス名「element」を持つ div 要素に追加します。

ステップ 4

– 次に、スライドショーの CSS コードを追加する必要があります。「親」 div 要素に固定の幅と高さを指定します。 ステップ 5

– スライドである「要素」 div の固定幅と高さを設定します。

ステップ 6

– 「スライド」 div の場合、含まれるスライドの合計数に応じて合計幅を計算し、特定の期間の「スライドショー」アニメーションを追加します。

ステップ 7 – スライドを変更するために 'margin-left' CSS プロパティの値を変更する必要がある 'slideshow' キーフレームを作成します。また、20 のギャップにおけるパーセンテージの内訳も得ています。スライドが 4 枚あるので。

＃＃＃例＃＃＃

以下の例では、4 つの異なるスライドを作成し、テキスト コンテンツを追加しました。さらに、「n 番目の子」疑似セレクターを使用して、n 番目のスライドを選択し、そのフォント サイズとテキストの色を変更しました。 リーリー

出力では、ユーザーは 10 秒のスライドショーを見ることができます。

例

以下の例では、スライドのコンテンツとして画像を追加します。さらに、画像のサイズを「要素」div のフルサイズに設定します。

リーリー

出力では、ユーザーは画像のスライドショーを観察できます。

結論

ユーザーは、HTML と CSS のみを使用してスライドショーを作成する方法を学びました。ただし、より柔軟に操作できるため、スライドショーを作成するには JavaScript を使用することをお勧めします。たとえば、100 枚を超えるスライドがあり、スライドショーを作成する必要がある場合、スライドショーをアニメーション化するためにキーフレームにハードコーディングされたパーセンテージ値を追加する必要があるため、CSS コードがより複雑になる可能性があります。

以上がHTML と CSS を使用してスライドショーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。