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;
}
}
}
出力：
このコードでは、各 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];
}
出力：
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 属性も設定するため、画像が表示されます。
関連記事 - JavaScript Array
- 配列に JavaScript の値が含まれているかどうかを確認する
- JavaScript で特定の長さの配列を作成する
- JavaScript で配列を文字列に変換する
- JavaScript で配列からオブジェクトを検索する
- JavaScript で配列から最初の要素を削除する
- JavaScript で引数を配列に変換する