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

Question

我是 JQuery 的新手，我需要的只是通过鼠标单击选择网站中显示的图像并显示包含该图像的弹出 slider 。

我正在完成它，但点击下一步时它会从第一张图片加载，而不是显示下一张图片。

我的代码:

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

If I click safari means it has to load ie next but it loads firefox(the first one).

谁能帮帮我？

Answer 1

因为你的位置从 0 开始。所以即使你点击 safari 它仍然会显示第一张图片。你需要根据你点击的图片改变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