jQuery Cycle - 如何将 'scrollHorz' 过渡(包括后退/下一步导航)与自定义不透明度效果结合使用？

Question

希望能帮到你。我正在使用循环插件进行幻灯片放映，并希望使用类似 fx: 'scrollHorz' 的东西来使幻灯片在分别按下下一个/后一个按钮时向左/向右移动。

基本演示在这里:http://jquery.malsup.com/cycle/scrollhv.html

但是，我不得不使用 fx: 'custom'，因为我引入了自己的不透明效果。所以现在，我失去了左/右滑动功能!

有人可以帮助我启用幻灯片向左滚动(即从右侧输入)下一个按钮和向右滚动(即从左侧输入)后退按钮，同时保持不透明效果吗？我已经设法让幻灯片在单击“#nextArrow”时从右向左移动，但我希望在按下“#prevArrow”时方向相反。

Cycle 插件的当前代码:

$(document).ready(function() {
    $('#slideshowframe').cycle({
        fx: 'custom',
        timeout:0,      // setting for manual slideshow 
        speed:750,      // number of milliseconds between each transition
        next:   '#nextArrow', 
        prev:   '#prevArrow',
        cssBefore: {  
                top:  0, 
                    left: 1051,
                opacity: 0,
                display: 'block' 
        },

        animIn:  {  left: 0,
                opacity: 1
        },

        animOut: {  
                left: -1051,
                opacity: 0
        },
    });
});

Answer 1

将 fx:'custom' 替换为 fx:'scrollHorz'

http://jquery.malsup.com/cycle/scrollhv.html

并且您必须添加属性rev: 0,。

这是一个示例:jsfiddle.net/7SQsX/21