JavaScript の画像の配列

Mehvish Ashiq 2023年10月12日
  1. JavaScript で配列オブジェクトを使用して画像の配列を表示する
  2. JavaScript で配列を使用して画像の配列を表示する
JavaScript の画像の配列

このチュートリアルでは、画像の JavaScript 配列の作成と反復について説明します。JavaScript 配列配列オブジェクトの使用例です。各例には、スタートアップコードと練習用のそれぞれの出力があります。

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

HTML コード:

<!DOCTYPE html>
<html>
<head>
    <script src="./javascript/imageArray.js"></script>
    <link rel="stylesheet" href="./css/styles.css">
    <title>Image Iteration</title>
</head>
<body>
    <h1>Click to see the next image</h1>
    <div id="splash">
        <img src="./images/splash class room image.jpg" alt="classroom image" id="mainImage">
    </div> 
    <div id="controls">
        <button id="previousbtn" onclick="previousImage()">Previous Image</button>
        <button id="nextbtn" onclick="nextImage()"> Next Image</button>
    </div>
</body>
</html>

CSS コード:

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

JavaScript コード:

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage() {
  var img = document.getElementById('mainImage');
  for (var i = 0; i < imgArray.length; i++) {
    if (imgArray[i].src == img.src) {
      if (i === imgArray.length) {
        document.getElementById('mainImage').src = imgArray[0].src;
        break;
      }
      document.getElementById('mainImage').src = imgArray[i + 1].src;
      break;
    }
  }
}
function previousImage() {
  var img = document.getElementById('mainImage');
  for (var i = imgArray.length - 1; i >= 0; i--) {
    if (imgArray[i].src == img.src) {
      if (i === imgArray.length) {
        document.getElementById('mainImage').src = imgArray[4].src;
        break;
      }
      document.getElementById('mainImage').src = imgArray[i - 1].src;
      break;
    }
  }
}

出力:

画像の javascript 配列-オブジェクトを使用した画像の反復

このコードでは、各 img 要素は image オブジェクトです。src は、その特定のイメージを持つファイル名を参照する文字列を割り当てることによっても定義されます。

nextImage 関数は、ID mainImage を持つ最初の要素を取得してから、最後の画像を繰り返し処理します。previousImage 関数も、ID が mainImage の最初の要素を取得しますが(nextImage メソッドと同様)、現在の画像から逆方向にループします。

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

HTML コード:

<!DOCTYPE html>
<html>
<head>
    <script src="./javascript/imageArray.js"></script>
    <link rel="stylesheet" href="./css/styles.css">
    <title>Image Iteration</title>
</head>
<body onload="makeImage();">
    <div class="contents" id="content"></div>
    <button onclick="nextImage()">Next Image</button>
</body>
</html>

CSS コード:

img{
    width: 350px;
    height: 350px;
}

JavaScript コード:

var images = [
  './images/splash class room image.jpg', './images/splash animal image.jpg',
  './images/splash nature image.jpg', './images/splash food image.jpg',
  './images/splash travel image.jpg'
];
var index = 0;

function makeImage() {
  var img = document.createElement('img')
  img.src = images[index];
  document.getElementById('content').appendChild(img);
}

function nextImage() {
  var img = document.getElementById('content').getElementsByTagName('img')[0]
  index++;
  index = index % images.length;
  img.src = images[index];
}

出力:

javascript による画像の配列 - 配列を用いた画像の反復表示

makeImage 関数は img タグを作成し、それらの src 属性を指定します。この関数は、<body> タグの onload イベントを使用してページがロードされた直後に呼び出されます。createElement は HTML 要素を作成します(この例では img 要素を作成しています)。

次に、画像を取得するための img.src を指定します。appendChild 関数は、ID が content である要素内に img 要素を追加します。

簡単に言うと、makeImage 関数は、id の値が content であるタグ内に img タグを作成しています。

nextImage 関数のコードの最初の行は、ID が content である要素の最初の img タグを取得します。index = index % images.length; 出力に最後の画像がある場合は、最初の画像に移動します。

この関数は src 属性も設定するため、画像が表示されます。

著者: Mehvish Ashiq
Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

関連記事 - JavaScript Array

関連記事 - JavaScript Image