如何在播放期间反转 jQuery Cycle 幻灯片中显示的图片顺序？

Question

所以我的问题非常简单。假设我有一个带有“淡入淡出”过渡的幻灯片，总共有 10 张图片，并且我还有典型的下一张/上一张按钮。幻灯片自动从图像 1 循环到图像 10。如何让用户可以随时反转播放顺序？例如，在观看图像 6 时，用户单击“上一页”（或必要时单击新按钮），然后返回到图像 5 后，幻灯片继续播放图像 4、3、2...

这可能吗？我读到并尝试了 Cycle 中的“rev”选项，但我无法使其工作，实际上我不确定它的目的是我需要的。

谢谢您的任何想法！

Answer 1

查看源代码，看起来 rev 选项仅适用于动画，不适用于淡入淡出。以下是确切的评论：

// causes animations to transition in reverse (for effects that support it such as scrollHorz/scrollVert/shuffle)

您可能正在寻找向后：

// true to start slideshow at last slide and move backwards through the stack

当您想要颠倒顺序时，请尝试将其设置为 true。

编辑：可能有更好的方法来做到这一点。无论如何，这是一种方法。首先，向按钮添加一个调用某个函数的点击处理程序：

function toggleDirection(){
    // replace your_slide_div with whatever your div is named
    $('.your_slide_div').cycle("toggleDirection");
}

然后在循环插件 JS 文件中查找 handleArguments(cont, options, arg2) 函数。在 switch 语句中，添加一个案例：

case "toggleDirection":
        $(cont).data('cycle.opts').backwards = $(cont).data('cycle.opts').backwards ? false : true;
        if($(cont).data('cycle.opts').backwards)
            $(cont).data('cycle.opts').nextSlide = 
                $(cont).data('cycle.opts').nextSlide - 2 < 0 ? 
                $(cont).children().length - 1 : $(cont).data('cycle.opts').nextSlide - 2;
        else
            $(cont).data('cycle.opts').nextSlide = 
                $(cont).data('cycle.opts').nextSlide + 2 >= $(cont).children().length ? 
                0 : $(cont).data('cycle.opts').nextSlide + 2;
        return false;

编辑：此案例假设您正在滑动浏览所有图像。如果您使用slideExpr选项，那么这会导致问题。

请注意，这会切换方向，因此单击按钮两次会使其恢复正常，如果您只想反转方向，请将大小写更改为：

(cont).data('cycle.opts').backwards = true;

编辑：希望是最后一个。在插件 JS 文件中，搜索以下内容：

opts.nextSlide < opts.currSlide

将特定选择替换为：

opts.currSlide == els.length - 1