JavaScript Thumbnails from Array

Question

私は現在、Javaスクリプトの助けを借りて写真を表示しているWebサイトで作業しようとしています。現時点でこのウェブサイトを設定している方法では、画像は番号の付いた写真のリンクの上に表示されます。写真の下に数字が表示されているのではなく、数字を写真のサムネイルにしたいと思っています。それらを画像で置き換えることは可能ですか？どんな助けもありがとうございます。

これは私がこれまで持っているものです。

var photos = new Array(); 
 
var photoindex = 0; 
 

 
photos[0] = "images/piano.jpg"; 
 
photos[1] = "images/guitar.jpg"; 
 
photos[2] = "images/studio.jpg"; 
 
photos[3] = "images/sheetmusic.jpg"; 
 

 
function backward() { 
 
    if (photoindex > 0) { 
 
    document.images.p.src = photos[--photoindex]; 
 
    } 
 
} 
 

 
function forward() { 
 
    if (photoindex < photos.length - 1) { 
 
    document.images.p.src = photos[++photoindex]; 
 
    } 
 
} 
 

 
for (i = 0; i < photos.length; i++) { 
 
    document.write("<a href=\"javascript: goto(" + i + ");\">" + i + "</a> "); 
 
} 
 

 
function goto(n) { 
 
    if (n < photos.length && n >= 0) { 
 
    photoindex = n; 
 
    document.images.p.src = photos[photoindex]; 
 
    } 
 
}

<br> 
 
<div style="text-align:center;left:5px;"> 
 
    <table width="250" border="0" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
     <td colspan="3" align="center" valign="top"> 
 
     <img src="images/weloveweb.png" name="p" width="250" height="188" id="p" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td valign="top"><a href="javascript: backward();">&lt;&lt;</a> 
 
     </td> 
 
     <td valign="top" style="text-align: center"> 
 
     </td> 
 
     <td valign="top" style="text-align: right"><a href="javascript: forward();">&gt;&gt;</a> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 1

あなたのサムネイルURLがphotos配列に格納されているので、あなたはサムネイルの代わりに、そのインデックスを表示するために何をする必要がありますかさ各サムネイルのURL（つまりphotos[i]）を含むsrc属性を持つimgタグを作成します。

変更：

for (i = 0; i < photos.length; i++) { 
    document.write("<a href=\"javascript: goto(" + i + ");\">" + i + "</a> "); 
// ------------------------------------------------------------^ change this `i` 
} 

の中へ：

for (i = 0; i < photos.length; i++) { 
    document.write("<a href=\"javascript: goto(" + i + ");\">" + "<img src=" + photos[i] + "/></a> "); 
}