0

嗨，我有一个 jsFiddle 可以分享，但以前从未使用过，所以我希望我做得对.. http://jsfiddle.net/Mayron/3V62C/

我也有这些屏幕截图以更好地说明我的意思：http: //i.imgur.com/NgQk5P2.jpg

我在图库页面中有一个图像表，当您单击图像时，它会打开一个框架，显示一个空白但更大的图像，该图像获得您单击的较小图像的来源。这很好用，但我将画廊中的所有图像都列在一个数组中，并且大框架上有三个按钮：上一个、关闭和下一个。到目前为止，JavaScript 代码允许您单击下一个和上一个来浏览它们，但它总是从数组 [0] 开始旅程，如果您首先单击从图库页面查看列表中的第 6 个，那就不好了.

我希望这是有道理的，如果没有然后让我知道！

问题在于这条线导致它从第一张图像开始：

currentIndex = 0;

如何更改此设置以使 currentIndex 编号是用户第一次单击的图像？

4

3 回答 3

1

有几种方法，但这实际上取决于您使用什么以及您希望代码看起来多干净。我在每个 div 中放置了一个隐藏的输入，并使用 JQuery 检索它$("input", $(this).parent()).val();

您还可以使用 Jquery 的索引。http://api.jquery.com/index/

您可以将它放在一个类中并检索单击项目的类（与为每个图像设置一个 ID 相同的想法）

单击时，您可以在类属性中添加一个选择器，然后您可以使用 for-each 来计算在按图像顺序点击该类之前经过的图像数量。

您也可以执行 showLarge(this, index#) 并以这种方式设置索引。我不能让你的 JS 小提琴工作。

对每个图像行执行此操作：

    <td><a href="#" onclick="javaScript:showLarge(this,1);" ><img class="imgBorder" id="image1"  src="Media//Gallery//img_1.jpg" alt="Gallery Image 1" /></a>
    </td>

这会将 onclick 放入锚标签并在名为 image1 的图像标签中添加一个 id（1 是您放入锚标签第二个参数的数字）

在 javascript 中，执行以下操作：

function showLarge(img, index) {
    var largeFrame = document.getElementById("zoomedIn");
    largeFrame.style.visibility = 'visible';
    var largeImage = document.getElementById("largeImage");
    src = document.getElementById("image"+index);
    largeImage.src = src.src;
    currentImage = index;

}

这会根据点击的索引通过 id 获取图像

对于 next+prev 按钮，请执行以下操作：

function changeImage(direction) {
    index = parseInt(currentIndex) + parseInt(direction);

    if (index < 1) {
        index = 1; // or use imgArray.length to rotate round
    }

    if (index > imgArray.length) {
        index = imgArray.length; // or use 0 to rotate round
    }
    src = document.getElementById("image"+index);
    document.getElementById('largeImage').src = src.src;
    currentIndex = index;
}
于 2013-05-31T17:33:21.370 回答
1

尝试这样的事情：

function findIndex(src) {
    for (i = 0; i = imgArray.length; i++)
        if (imgArray[i].src == src) {
            currentIndex = i;
            return;
        }
}
function showLarge(img) {
    var largeFrame = document.getElementById("zoomedIn");
    largeFrame.style.visibility = 'visible';
    var largeImage = document.getElementById("largeImage");
    largeImage.src = img.src;
    findIndex(img.src);
}

它将更新 currentIndex 值。我已经更新了你的 jsfiddle： http: //jsfiddle.net/RN4bN/ 但我无法运行它，所以直接尝试你的代码。

于 2013-05-31T17:35:19.637 回答
0

在它们中的每一个上放置一个 ID，它是数组中它的编号，然后在单击它时将 currentIndex 更改为那个。

于 2013-05-31T17:26:31.383 回答