jQuery循环淡入淡出顺序更改答案

【问题标题】：jQuery cycle fade order changejQuery循环淡入淡出顺序更改
【发布时间】：2009-09-23 10:07:45
【问题描述】：

$('.rotateme').cycle({fx:'fade',speed:2500,timeout:3000,next:'#arrowright',prev:'#arrowleft',sync:1,pause:1});

嘿伙计们，上面的代码是我用于图像滑块的代码，其中图像在一个循环中淡入淡出（这很明显）。

不管怎样，事情就是这样：

当它在 li 元素中循环时，上一个按钮将我返回到刚刚淡出的 li 元素，然后继续沿着列表向下移动。

我想要发生的事情：

我希望上一个按钮将我返回到上一个元素并反转方向，因此它不会返回列表，而是会向上。

显而易见的解决方案是为#arrowright 单独绑定：

rev:           0,     // causes animations to transition in reverse

这在一定程度上有效，但在这里失败：如果我再次单击 #arrowright，它将再次反转方向 (doh)，这意味着 #arrowright 实际上是一个切换按钮，我不需要它...

有什么建议吗？

【问题讨论】：

标签： jquery html cycle

【解决方案1】：

//这个sn-p会在“#arrowRight”中添加一个“selected”类，从“#arrowLeft”中删除一个“selected”类。然后，当您运行 .cycle() 时，它将查看“#arrowRight”是否具有“已选择”类，如果是这样，则 .cycle() 将在没有 rev: 0 变量的情况下运行。否则，它将正常反转。当用户点击“#leftArrow”时，“selected”类将被删除。

if($("#arrowRight").hasClass("selected")) {

$('.rotateme').cycle({
    fx:'fade',

    speed:2500,
    timeout:3000,
    next:'#arrowright',
    prev:'#arrowleft',
    sync:1,pause:1 

});
}


else{
$('.rotateme').cycle({
    fx:'fade',

    speed:2500,
    timeout:3000,
    next:'#arrowright',
    prev:'#arrowleft',
    sync:1,pause:1
    rev: 0
});
}


$("#arrowRight").click({
    $(this).addClass({"selected"}); 
    $("#arrowLeft").removeClass({"selected"});
});


$("#arrowLeft").click({
    $(this).addClass({"selected"}); 
    $("#arrowRight").removeClass({"selected"});
});

【讨论】：