JavaScript で画像の配列を作成して反復する方法

ブラウザで一連の画像を表示するには、そのパスを配列に格納し、選択した位置をインデックスで保持し、選択したパスを画像要素の src に割り当てます。前へと次へのハンドラーは剰余演算でインデックスを更新できるため、空でない配列のどちらの端からでもナビゲーションを続けられます。このパターンは、既存の画像要素でも、JavaScript で作成した要素でも機能します。

JavaScript で Image オブジェクトを使用して画像の配列を表示する

ブラウザの Image コンストラクタは画像オブジェクトを作成します。各オブジェクトの src にローカルの画像パスを設定し、表示したい順序でオブジェクトを格納します。src の値が画像ファイルを識別します。表示される <img> 要素は、選択したオブジェクトの src を自身のソースとして使用できます。

選択した位置は 0 から始まるインデックスで保持します。images を配列とすると、前方向の式は (index + 1) % images.length、後方向の式は (index - 1 + images.length) % images.length です。最初の式は最後の項目から最初の項目へ移動し、2 番目の式は最初の項目から最後の項目へ移動します。どちらの式も、配列に少なくとも 1 つの画像が含まれ、開始インデックスが範囲内にあることを前提としています。

ナビゲーションコントロールを接続する前に、最初のオブジェクトの src で表示要素を初期化します。コントロールが選択されたら、インデックスを更新し、選択したオブジェクトの src を表示要素にコピーします。ローカルパスは、ページの URL および画像ファイルの場所と一致させてください。

JavaScript で画像パスの配列を使用して画像を表示する

文字列の配列は、画像パスを表示順に保持するシンプルな方法です。以下の例はインデックスを保持し、各ナビゲーション関数が選択したパスを返します。これは独立した JavaScript の例です。このドラフトには実行の証拠は提供されていません。

const images = [
  "./images/classroom.jpg",
  "./images/animals.jpg",
  "./images/nature.jpg"
];
let index = 0;

const nextImage = () => {
  index = (index + 1) % images.length;
  return images[index];
};

const previousImage = () => {
  index = (index - 1 + images.length) % images.length;
  return images[index];
};

console.log(nextImage());
console.log(previousImage());

ページでは、<div id="content"></div> のようなコンテナの中に画像要素を配置します。その src を images[index] で初期化し、どちらかのナビゲーション関数がインデックスを更新した後、新しい images[index] の値を同じ要素の src に割り当てます。例のパスはプレースホルダーなので、ページが読み込めるファイルに置き換えてください。配列には少なくとも 1 つのパスが含まれていなければならず、初期インデックスはそのエントリのいずれかを指していなければなりません。

JavaScript で DOM メソッドを使用して画像の配列を表示する

JavaScript は、元の HTML に表示する <img> 要素を要求する代わりに、その要素を作成できます。まず、たとえば <div id="imageContainer"></div> のようなターゲットコンテナをページに配置します。次に document.getElementById("imageContainer") でそれを取得し、document.createElement("img") で画像を作成し、画像の src を最初のパスに設定し、imageContainer.appendChild(img) で追加します。

作成した要素と現在のインデックスは、前へと次へのハンドラーで使えるようにしておきます。各ハンドラーは上記のラップアラウンドの式で次のインデックスを計算し、同じ要素の src を更新します。これにより画像要素が 1 つ作成され、選択したパスが変わるたびに再利用されます。コンテナは初期化の前に存在しなければなりません。スクリプトはコンテナの後に配置するか、DOMContentLoaded ハンドラーで初期化してください。このセクションでは DOM メソッドを直接使用しており、HTML テンプレート要素は使用しません。

JavaScript でモダンな JavaScript 機能を使用して画像の配列を表示する

例では、再代入されないバインディングには const を、変化するインデックスには let を、const nextImage = () => { ... } のようなアロー関数構文を使用しています。これらは例で使用されている構文を説明するものであり、ここではランタイムの互換性について主張するものではありません。

双方向のビューアでは、最初のパスを描画する前にインデックスを初期化します。ターゲットの画像要素が存在したら、その初期 src を配列から設定します。次へと前へのコントロールには、上記の式でインデックスを更新し、表示される src を更新するハンドラーを割り当てます。このアプローチではナビゲーションに配列とインデックスを使用します。forEach は使用しません。

結論

画像オブジェクトを事前に作成したい場合は Image オブジェクトの配列を使用し、そうでない場合はパスの配列を保持し、選択が変わるたびに表示される画像を 1 つ更新します。DOM メソッドは、JavaScript がコンテナ内に画像要素を作成する場合に便利です。どちらのアプローチを選ぶ場合でも、表示される画像を初期化し、そのインデックスを配列と揃え、前方向と後方向のナビゲーションにはラップアラウンドの式を使用してください。