页面上的多个 jQuery 轮播

Question

我一直在按照本教程创建一个轮播，到目前为止它运行得很好，但我是一个初学者，我需要在一个页面上运行这个轮播的多个实例。 轮播显示并实际工作，但是它们会在设置的延迟时间以及单击下一个/上一个按钮或分页点时同时进行动画处理。 我需要它们彼此独立运行。 我真的很感激任何建议。

谢谢

Answer 1

将您的轮播与个人课程分开。 像这样在事件函数中更改位代码

Zippy.prototype.events = function(){
    this.$el
        .on('click',this.settings.arrowRight,{direction:'right'},this.changeSlide)
        .on('click',this.settings.arrowLeft,{direction:'left'},this.changeSlide)
        .on('click','.indicators li',this.changeSlide);
};

演示： http : //codepen.io/barrel/pres/oBefw

Answer 2

可能点击事件正在使用类而不是 id。

Answer 3

在你的代码中，你有这样的东西：

var args = {
    arrowRight : '.arrow-right', //A jQuery reference to the right arrow
    arrowLeft : '.arrow-left', //A jQuery reference to the left arrow
    speed : 1000, //The speed of the animation (milliseconds)
    slideDuration : 4000 //The amount of time between animations (milliseconds)
};

$('.carousel').Zippy(args);

这里对每个滑块使用 args1、args2、args3 等，并为轮播使用不同的类（例如 carousel1、carousel2、carousel3 等）

然后改变slideDuration速度等。所以第一个滑块将是

var args1 = {
    arrowRight : '.arrow-right', //A jQuery reference to the right arrow
    arrowLeft : '.arrow-left', //A jQuery reference to the left arrow
    speed : 1000, //The speed of the animation (milliseconds)
    slideDuration : 4000 //The amount of time between animations (milliseconds)
};

$('.carousel1').Zippy(args1);

第二个滑块将是

var args2 = {
    arrowRight : '.arrow-right', //A jQuery reference to the right arrow
    arrowLeft : '.arrow-left', //A jQuery reference to the left arrow
    speed : 2000, //The speed of the animation (milliseconds)
    slideDuration : 5000 //The amount of time between animations (milliseconds)
};

$('.carousel2').Zippy(args2);