CSSを使用したJavaScriptスライドショー

• かもしれません 17, 2024

前の記事で、非常に単純なJavaScriptスライドショーを作成しました。このスライドショーは完全に機能し、JavaScriptを使用していない人にとっても適切なものを表示しますが、私のWebサイトに必要なすべての機能を備えているわけではありません。特に、現在表示している画像のサムネイルを他のサムネイルとは何らかの形で見せたいと思います。スタイルはこれを達成するための良い方法なので、既存のHTMLのすべての属性をCSSに変換することから始めます。

最初に、既存のスタイルをCSSを使用するように変換しました。 CSSに慣れていない場合、CSSを試してみる最も簡単な方法は、CSSを スタイル HTMLドキュメントの先頭にあるタグ。初期タグには、使用しているスタイル情報の種類をブラウザに伝えるためにtype属性が必要です。したがって、次のようになります。



CSSへの最初の変換は簡単でした。なぜなら、大きな画像のみにスタイル情報があり、既に id JavaScriptの目的で使用されていた属性。

#largeImage {
境界線：2pxの黒一色;
幅：544px;
高さ：408px;
}

以前はサムネイルのサイズ情報を含めていませんでしたが、というクラスを追加しました 親指 そのクラスの画像タグを設定して、サイズを40px x 40pxに設定します。これは、サムネイルに対して大きすぎるまたは小さすぎる画像を誤って読み込んだとしても、サムネイルサイズでの表示を強制されることを意味します。

img.thumbs {
ボーダー：なし;
幅：40px;
高さ：40px;
}

私も追加しました スライドショー スライドショー全体を保持するクラス。これにより、必要に応じて、スライドショー全体の境界線を追加したり、背景色を変更したりすることができます。現時点では、最大高さを大きな画像の高さに設定するためにのみ使用しています。サムネイルを追加するとき、サムネイルを大きな画像の上に移動するのではなく、横に置いておくためです。残念ながら、Internet Explorerはmax-height属性をサポートしていないため、この問題については後ほど対処する必要があります。

.slideshow {
高さ：408px;
最大高さ：408px;
}

最後に、選択したサムネイルのスタイルを作成しました。私は、選択したサムネイルを半透明にし、狭い赤い境界線を使用することにしました。一度に1つの画像しか選択されないため、この目的のために「current」というIDを使用することにしました。 CSSを使用する利点は、コードを変更せずにいつでも外観を変更できることです。スタイルは次のようになります。

img＃current {
境界線：1pxの赤一色;
filter：alpha（opacity = 50）;
-moz-opacity：0.5;
不透明度：0.5;
}

ここで、不透明度要素を使用するための標準的な呼び出しであるブラウザーの違いを再度処理するためのコードを参照しますが、IEおよびMozillaベースのブラウザーはまだそれをサポートしていません。

最後に、サムネイルのHTMLを変更してスタイルを使用し、関数を呼び出しました。スライドショーのHTMLは次のようになります。









JavaScriptを変更していないため、スライドショーは引き続き機能しますが、スタイリングが増え、プレゼンテーションがHTMLおよびJavaScriptから分離されました。ただし、1つ問題があります。最初に選択したサムネイルは半透明で、赤い境界線が付いていますが、画像を変更してもそのままです。これを修正するには、古い友人のJavaScriptに戻る必要があります。

ここまでのコードの実際の例を見ることができます。

動画の説明: 【5分で】スライダープラグイン「slick」の実装方法【解説】 (かもしれません 2024).