Question

首先抱歉我的语法不好，因为英语不是我的第一语言。

无论如何，我对Jquery / Javascript完全不熟悉。

我正在尝试使用Jquery创建一个具有图像交换效果的图库。

我想要实现的是，当我点击缩略图（比方说4号）时，主图像会显示4号图像。好吧，我已经成功编写了这个问题的代码。

现在，我想要实现另一件事：

我有一个“下一个”按钮。如果主图像显示4号图像，则单击“下一步”按钮将导致主图像显示图像No.5。或者，如果主图像显示图像No.7，则单击“下一步” - 按钮会显示8号图像，依此类推。

使用我编写的代码，点击“下一步”按钮将使主图像显示第二张图像。再次单击它然后显示第三个图像，但不显示我点击缩略图的下一个编号。

这是我的数组：

var bilder = ["../../images/galerie/assassin_2_01.jpg",
              "../../images/galerie/assassin_2_02.jpg",
              "../../images/galerie/assassin_2_03.jpg",
              "../../images/galerie/assassin_2_04.jpg",
              "../../images/galerie/assassin_2_05.jpg",
              "../../images/galerie/assassin_2_06.jpg",
              "../../images/galerie/assassin_2_07.jpg",
              "../../images/galerie/assassin_2_08.jpg",
              "../../images/galerie/assassin_2_09.jpg",
              "../../images/galerie/assassin_2_10.jpg",
              "../../images/galerie/assassin_2_11.jpg",
              "../../images/galerie/assassin_2_12.jpg",
              "../../images/galerie/assassin_2_13.jpg",
              "../../images/galerie/assassin_2_14.jpg",
              "../../images/galerie/assassin_2_15.jpg"];

这是我的Jquery：

function mainimage(nr) {
    $("div.mainimg ul li:eq(0) div img").fadeOut({"duration":300, complete:function() {
        $(this).attr("src",bilder[nr]).fadeIn(500);
    }});
}
function next() {
    if (index < bilder.length) {
        index++;
        mainimage(index);
    }
}

这是我的HTML结构：

<div class="mainimg">
    <ul>
        <li><div><img class="img1" src="../../images/galerie/assassin_2_01.jpg" /></div></li>
    </ul>
        <div class="caption">
            <div>Assassin's Creed 2</div>
            <div><a href="#">back/a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="next();">next</a></div>
        </div>
</div>

<div class="thumbsrow">
    <div class="galeriethumbs"><img onclick="mainimage(0);" /></div>
    <div class="galeriethumbs"><img onclick="mainimage(1);" /></div>
    <div class="galeriethumbs"><img onclick="mainimage(2);" /></div>
</div>
<div class="thumbsrow">
    <div class="galeriethumbs"><img onclick="mainimage(3);" /></div>
    <div class="galeriethumbs"><img onclick="mainimage(4);" /></div>
    <div class="galeriethumbs"><img onclick="mainimage(5);" /></div>
</div>

我很感谢你的帮助！

Answer 1

你在哪里维护index变量？也许您需要在致电mainimage function

时进行设置

Answer 2

如上所述，您只需要在mainimage函数上设置索引变量。

function mainimage(nr) {
        $("div.mainimg ul li:eq(0) div img").fadeOut({"duration":300, complete:function() {
            $(this).attr("src",bilder[nr]).fadeIn(500);
            index = nr; //this will set the index of the currently selected image.
        }});
    }
    function next() {
        if (index < bilder.length) {
            index++;
            mainimage(index);
        }
    }

使用Jquery的图库（点击“下一步”按钮）

2 个答案: