0

每当用户单击滑块中的相应按钮时，我都试图将滑块中图像集合的位置“分流”到左/右。我有这个工作，但代码有点大而且重复，所以我一直试图把它清理一下，这是它的当前状态：

$('#btnRight').click(function (e) {
    e.preventDefault();
    if (parseInt(6 + indexx) != 10) {
        indexx++;
        $('#first').attr('src', $('#second').attr('src'));
        $('#second').attr('src', $('#third').attr('src'));
        $('#third').attr('src', $('#fourth').attr('src'));
        $('#fourth').attr('src', $('#fifth').attr('src'));
        $('#fifth').attr('src', $('#sixth').attr('src'));
        $('#sixth').attr('src', '/Content/Images/Gallery/Thumbs/' + parseInt(6 + indexx) + '.png');
    }
});

您可以看到它是手动选择每个元素并交换源属性以将图像向右移动。

这是我一直在努力改进但不太奏效的代码：

$('#btnLeft').click(function (e) {
    e.preventDefault();
    $("#gallerySlider img").each(function (index) {
        $(this).attr("src", $(this).prev().attr("src"));
    });
});

这将获取当前集合中的第一张图像，并设置所有#gallerySlider错误图像的来源。但是，如果我将相同的代码放入警报中，它会正确显示图像并且它是之前的图像，例如输出类似于：

/Content/Images/Design/Thumbs/10.png Previous Image: /Content/Images/Design/Thumbs/9.png

所以它正确地选择了图像并给了我权利src，但为什么它将滑块中所有图像的来源设置为同一个？当然，它应该通过所有这些，并且：

$(this).prev().attr("src")

每个人会不一样吗？

谁能看到我在这里出错的地方？

谢谢

4

2 回答 2

1

如果您想象图像 1 是“img1.jpg”而图像 2 是“img2.jpg”等。

您放置的代码会将图像 2 设置为“img1.jpg”，然后将图像 3 设置为图像 2 的 src，现在将是“img1.jpg”，该图像最终将成为所有图像的 src . 那有意义吗？

你有没有在网上寻找 jQuery 类型的画廊插件，因为那里有负载可以为你完成这项工作？

于 2012-08-10T08:58:38.820 回答
1

user1166905 的回答听起来不错。一个解决方案是，如果您想向左移动，则将第一个元素从 div 中取出并在最后将其放回 div 中。如果按右，也是如此。您从列表中取出最后一个元素，将其从 div 中删除，然后再次将其放置在图库 div 的开头。

$('#btnLeft').click(function (e) {
     e.preventDefault();
     $('#gallerySlider').append($("#gallerySlider img").first());
}); 

$('#btnRight').click(function (e) {
     e.preventDefault();
     $('#gallerySlider').prepend($("#gallerySlider img").last());
});

我认为这应该可以解决问题

于 2012-08-10T09:07:50.680 回答