Javascript 多个滑块，控制所有滑块的按钮

我正在尝试使用此滑块：

我需要在页面上有多个滑块，最多10个或更多。这是一个属性列表页面，这是一个非常轻的滑块

当前，当您按“下一步”时，它会为每个滑块滑动图像。我知道这是一个ID问题，但有没有一个简单的方法来解决这个问题，而不必有几十个不同的ID

更新

---

这是我更新过的笔，滑块工作正常：但似乎每个滑块都在加载UL中的最后一个LI

我在想这样的事情

function moveRight(slider) {
    slider = $(slider);
    slider.find('ul').animate({
        left: - slideWidth
    }, 200, function () {
        slider.find('ul li:first-child').appendTo(slider.find('ul'));
        slider.find('ul').css('left', '');
    });
};

$('a.control_next').click(function () {
    moveRight($(this).parent());
});

使其成为唯一的全局选择是

a.control\u next

，然后将其余的范围限定到实际发生单击的位置

编辑：在选择超出您需要的内容时，还存在一些其他问题。这是另一个固定点

这个

变成这样

$('.slider').each(function(slider){
  slider = $(slider);
  slider.find('ul li:last-child').prependTo(slider.find('ul'));
});

这将获取每个滑块中的最后一个图像，并将其预先添加到列表中，以便“后退”按钮可以工作。如果图片宽度/高度/计数不同，或者如果您选择实现复选框autoscroll，您将遇到其他问题

---

要解决这些问题，您需要在js中实现更好的结构，以便每个滑块都有自己的变量。很抱歉，我没有时间进行设置。

这应该是一个非常简单的解决方法。在

下一步

和

上一步

按钮的单击事件中，将

父项

传递到函数中，然后使用它来制作动画。它将限制范围仅限于正在使用的滑块。您可以修复它是的，但这是一个快速修复。您需要将jQuery（和CSS）更改为使用类而不是ID，另外它还需要引用被单击的单个实例，而现在它引用的是一个特定的ID。@Shaded Yeh，我唯一关心的是ID#滑块的样式。你能说得更具体些吗？我只是想避免每个滑块都有一个新的重复样式。@j08691谢谢，我会尝试一下。您只需做一点工作，就可以将它变成一个jQuery插件，然后在任何地方都可以轻松使用。哦，太好了！这是一种工作。我现在可以滑动单个滑块了。唯一的问题是，我认为所有图像都是同时加载的。不是UL中的具体内容。@LukeD1uk我真的不明白你关于图像加载的意思。你能给我举个例子吗？正如你在这里看到的：它正在将所有图像加载到每个滑块中。在我看来，它就像在每个

ul

中加载最后一个

li

，我不明白为什么…@LukeD1uk它会将最后一个图像放在第一个之前，以便“后退”按钮在初始加载时工作。我将其包装在一个jquery中，以便正确地确定其范围，我将很快更新答案。

$('.slider').each(function(slider){
  slider = $(slider);
  slider.find('ul li:last-child').prependTo(slider.find('ul'));
});