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;
        }
}

这样做是为了当您单击其中一个较小的图像时，如图片背景所示，它将打开一个框架，并为大图像框架提供小图像源，因此小图像显得更大。

然而，不起作用的部分是有两个按钮：一个是下一个按钮，另一个是上一个按钮。我尝试了两种方法：似乎永远不会起作用的“changeImage（direction）”和这个：

 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;
            }
        }
    }

第二个允许我使用下一个按钮，但如果我尝试为上一个按钮反转它，那么它不起作用。我只是希望能够单击图像，然后隐藏图像并单击另一个图像，它的工作原理完全相同。我建议下载代码并自己尝试一下。

谢谢！

4

1 回答 1

0

首先，如果这是一个类，你必须这样做，很好，但你真的应该使用不显眼的 javascript。我建议采用这种方法，一旦单击图像，就使用它的 ID（因为您已经对所有图像进行了 ID）并使用该数字循环浏览图像。无需使用 next/back，只需调用“changeImage()”方法并将您要切换到的图像的 ID 传递给它。这是解决此问题的最快方法。所以：

1）给所有这些幻灯片图像一个类，比如“slideshowImage”。

2）使用javascript为它们动态分配一个onclick函数：“changeImage（）”。

3) 在 changeImage() 中使用点击图像的 ID 打开图像。您可以将 changeImage() 重用于下一步。

4) 如果由于单击图像元素而导致 changeImage() 未运行（例如，幻灯片已打开并且您单击了下一个/上一个），则增加或减少先前单击的 ID 号并重新运行改变图像的功能。

希望有帮助（现在没有时间给你一个代码片段......但这应该为你指明正确的方向）。另外，使用 unotrusive JS 更简洁，更重要的是，它是绝对的行业标准。

于 2013-05-31T22:40:54.557 回答