javascript - 使用JQuery的图像滑块不会显示我选择的下一张图像，而是从头开始显示

我对JQuery还是很陌生，我所需要的只是在单击鼠标时选择一个显示在网站上的图像，然后显示一个包含该图像的弹出滑块。

我已经完成了，但是在单击下一步时，它是从第一张图像加载的，而不是显示下一张图像。

我的代码：

http://jsfiddle.net/MT7Ag/

    var myPos=0;
    $('#btnNext').click(function() {
        //copy this image to the placeholder
        $('#mimg').attr('src', $('.images .display').eq(myPos).attr('src'));
        myPos++;
        if(myPos==$('.images .display').length) {
        myPos = 0;
     }
    });

  如果我单击safari，则意味着必须加载Safari（即下一个），但它会加载Firefox（第一个）。


谁能帮我？

最佳答案

因为您的位置从0开始。因此，即使您点击野生动物园，它仍会显示第一张图片。您需要根据单击的图像更改myPos

使用jquery索引函数，您可以找到被单击元素的索引并更新myPos。

$('.display').click(function() {
            myPos = $('img').index(this)+1;
            var sr=$(this).attr('src');
            $('#mimg').attr('src',sr);
          $('#myModal').show();
            $('.modal').show();
        });

http://jsfiddle.net/MT7Ag/1