Question

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

$('#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")

每个人会有所不同吗？

谁能看到我在哪里出错？

三江源

Answer 1

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

您放置的代码会将图像2设置为“img1.jpg”，然后接下来将图像3设置为图像2的src，现在为“img1.jpg”，此图像将成为所有这些图像的src到底。这有意义吗？

你有没有在线查看jQuery类型的插件插件，因为那里有负载可以帮你完成工作？

Answer 2

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

我认为应该做的伎俩

试图创建一个简单的图库滑块

2 个答案: