JavaScriptスライドショーと機能

• かもしれません 17, 2024

以前の記事では、非常に単純なJavaScriptスライドショーを作成し、微調整を行いました。このスライドショーは完全に機能し、JavaScriptを使用していない人にも適したものを表示しますが、現在表示している画像のサムネイルを他のサムネイルとは異なる外観にしたいと思います。画像を半透明にし、選択したサムネイルに細い赤い境界線を追加する「current」というCSS IDを使用することに決めました。前回の記事では、最初に選択したサムネイルに対してこの動作を取得しましたが、新しいサムネイルを選択しても、新しいサムネイルは変更されず、最初のサムネイルは選択されたスタイルを維持しました。

スライドショーの以前のバージョンでは、ユーザーがサムネイルをクリックすると、関連する大きな画像が表示されます。私がやりたいのは、大きな画像を変更し、以前に選択した画像のサムネイルを通常に戻すように設定し、選択した画像の特別なスタイルでこのサムネイルを表示することです。サムネイルがクリックされたときに複数のことを行うようになったため、すべてのコードを img 関数を使用するためのタグ。 JavaScript関数は通常、 頭 HTMLのセクション。ページの本文が読み込まれたときに読み込まれ、準備ができます。間に直接挿入することができます 脚本 タグまたはプットとファイルが含まれています。短いプログラムの場合、または積極的にコーディングしている場合、ここで行ったようにページにコードを直接配置する方が簡単です。

各サムネイルに関数を使用することもできますが、サムネイルからサムネイルへの変更はすべて画像の名前とサムネイルのIDであるため（そして、IDに画像名を使用しました）、 idを引数として使用し、それを使用して「.jpg」を追加して適切な画像名を作成します。関数を呼び出しました ディスプレイ大.

関数displayLarge（id）{
//大きな画像を変更します
imageName = id + ".jpg";
document.getElementById（ "largeImage"）。src = imageName;
//前のサムネイルのスタイルをデフォルトに戻します
document.getElementById（ "current"）。id = oldID;
// IDを変更する前にメモします
oldID = id
//サムネイルを現在のスタイルで現在のものとしてマークします
document.getElementById（id）.id = "current";
}

この関数が初めて機能するためには、次の初期定義も指定する必要がありました oldID、現在選択されているサムネイルの元のIDを記憶するために使用している変数。このコードはすべて、Webページのheadセクションに配置されるため、ページがロードされる前にロードされます。

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











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

動画の説明: #01 jQueryで作るスライドショー (かもしれません 2024).