Question

我一直关注this tutorial创建旋转木马，到目前为止它运作良好，但我是初学者，我需要运行此轮播的多个实例一页。旋转木马显示并实际工作，但是它们在设定的延迟时同时动画，并且当点击下一个/上一个按钮或寻呼点时。我需要它们彼此独立运行。我真的很感激任何建议。

由于

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

在页面上的多个jQuery轮播

3 个答案: