Question

我已经花了一整天的时间来完成这个并且需要在明天之前完成，所以我怀疑今晚会有什么睡眠，但如果有人能解决这个问题，我会非常感激，因为它让我发疯。

我尝试了很多方法，但这是代码：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;
            }
        }
    }

第二个允许我使用下一个按钮，但如果我尝试将其反转为前一个按钮，则它不起作用。我只是希望能够点击图像，然后隐藏图像并单击另一个图像，它将完全相同。我建议您下载代码并亲自试用。

谢谢！

Answer 1

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

1）为所有幻灯片图像提供一个类，例如“slideshowImage”。

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

3）在changeImage（）内部使用单击图像的ID来打开图像。您可以重复使用changeImage（）进行下一步。

4）如果由于点击图像元素而没有运行changeImage（）（例如幻灯片已经打开并且你已经点击了下一个/上一个），请增加或减少之前点击的ID号并重新开始 - 运行改变图像的功能。

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

无法通过图像阵列返回

1 个答案: