0

私はこれに丸一日費やしており、明日までに完了する必要があるので、今夜は眠れないと思いますが、誰かがこの問題を解決できるなら、私は怒っているのでとても感謝しています.

私は多くの方法を試しましたが、これはコードです: http://www.mediafire.com/download/xibb998x4yg5avc/Image_JavaScript_Array_help!.zip

これがその写真です: http://i.imgur.com/NgQk5P2.jpg

基本的に、私は画像のテーブルを持っています:

<td><a href="#zoomedIn"><img id="0" onclick="showLarge(this);" src="Media//Gallery//img_1.png" alt="Gallery Image 1" /></a></td>
<td><a href="#zoomedIn"><img id="1" onclick="showLarge(this);" src="Media//Gallery//img_2.png" alt="Gallery Image 2" /></a></td>
<td><a href="#zoomedIn"><img id="2" onclick="showLarge(this);" src="Media//Gallery//img_3.png" alt="Gallery Image 3" /></a></td>
<td><a href="#zoomedIn"><img id="3" onclick="showLarge(this);" src="Media//Gallery//img_4.png" alt="Gallery Image 4" /></a></td>
<td><a href="#zoomedIn"><img id="4" onclick="showLarge(this);" src="Media//Gallery//img_5.png" alt="Gallery Image 5" /></a></td>

そして、「showLarge(this);」イベント ハンドラーが次の関数を呼び出します。

function showLarge(img) {
    var largeFrame = document.getElementById("zoomedIn");
    largeFrame.style.visibility = 'visible';
    var largeImage = document.getElementById("largeImage");
    largeImage.src = img.src;
    findIndex(img.src);
}

function findIndex(src) {
    for (var i = 0; i = imgArray.length; i++)
        if (imgArray[i].src == src) {
          currentImage = i;
        }
}

これは、画像の背景に示されているように、小さな画像の 1 つをクリックすると、フレームが開き、大きな画像フレームに小さな画像ソースが表示されるため、小さな画像がはるかに大きく表示されるようにするために使用されます。

ただし、機能しない部分は、2 つのボタンがあることです。1 つは次のボタンで、もう 1 つは前のボタンです。私は2つの方法を試しました.「changeImage（方向）」は機能していないようで、これは次の方法です。

 function nextImage(event) {
        var img = document.getElementById("largeImage");

        for(var i = 0; i < imgArray.length;i++)
        {
            if(imgArray[i].src == img.src)
            {
                if(i === imgArray.length){
                    img.src = imgArray[0].src;
                    break;
                }
                img.src = imgArray[i+1].src;
                break;
            }
        }
    }

2 番目のボタンを使用すると、次のボタンを使用できますが、前のボタンを逆にしようとしても機能しません。画像をクリックしてから、画像を非表示にして別の画像をクリックできるようにしたいだけで、まったく同じように機能します。コードをダウンロードして、自分で試してみることをお勧めします。

ありがとうございました！

4

1 に答える 1

0

まず、これがクラス用であり、この方法で行う必要がある場合は問題ありませんが、目立たない javascriptを使用する必要があります。画像がクリックされたら、その ID を使用し (すべての画像を ID したため)、その番号を使用して画像を循環させるというアプローチを取ることをお勧めします。next/back を使用するのではなく、単純に「changeImage()」メソッドを呼び出して、切り替え先の画像の ID を渡します。これは、これを修正する最速の方法です。そう：

1) 「slideshowImage」のようなすべてのスライドショー画像にクラスを与えます。

2) JavaScript を使用して、それらすべてに onclick 関数「changeImage()」を動的に割り当てます。

3) changeImage() 内で、クリックされた画像の ID を使用して画像を開きます。次のステップで changeImage() を再利用できます。

4) 画像要素をクリックしたために changeImage() が実行されなかった場合 (たとえば、スライドショーが既に開いていて、次へ/前へをクリックした場合)、前にクリックした ID 番号をインクリメントまたはデクリメントして、画像を変更する機能。

お役に立てば幸いです (今はコード スニピットを提供する時間がありません... しかし、これは正しい方向を示しているはずです)。さらに、目立たない JS を使用することは、はるかにクリーンであり、さらに重要なことに、絶対的な業界標準です。

于 2013-05-31T22:40:54.557 に答える