Question

我在解决这个问题时遇到了问题。

$('#slider-accueil').cycle({
    next:".slider-next",
    prev:".slider-prev",
    pager:"#slider-pager",
    //fx:'scrollHorz',
    fx: 'custom', 
    cssBefore: {  
        zIndex: 1,
        opacity:0,
        display:"block",
        marginLeft:"-932px"
    }, 
    animIn:  {  
        opacity:1,
        marginLeft:0
    }, 
    animOut: {  
        opacity:0,
        marginLeft:"932px"
    }, 
    cssAfter: {  
        zIndex: 0,
        opacity:0,
        display:"none",
        marginLeft:"-932px"
    },
});

所以这就是问题所在。这会自动淡出并向左移动。但我想，只有当你点击“上一步”按钮时，才能让它淡出并向右移动。

所以，底线：只有当点击上一个按钮触发图像更改时，是否有可能让jQuery循环再次制作另一个自定义动画？

Answer 1

您可以像这样创建自己的效果：http://jsfiddle.net/3Bzgv/1/

var tog=false;

function go(){
    $.fn.cycle.transitions.myEffect = function($cont, $slides, opts) {
        if (!tog){
            opts.cssBefore= {zIndex: 1, opacity:0, display:"block", marginLeft:"-932px"};
            opts.animIn=  {opacity:1, marginLeft:0};
            opts.animOut= {opacity:0, marginLeft:"932px"};
            opts.cssAfter= {zIndex: 0, opacity:0, display:"none", marginLeft:"-932px"};
        }else{
            opts.cssBefore= {zIndex: 1, opacity:0, display:"block", marginLeft:"932px"};
            opts.animIn=  {opacity:1, marginLeft:0};
            opts.animOut= {opacity:0, marginLeft:"-932px"};
            opts.cssAfter= {zIndex: 0, opacity:0, display:"none", marginLeft:"-932px"};
        }
        tog=false;
    };
}


$(function(){
    go();
    $('.slider-prev').click(function(){
        tog=true;
        go();
    });

    $('#slider-accueil').cycle({
        next:".slider-next",
        prev:".slider-prev",
        pager:"#slider-pager",
        fx: 'myEffect',
    });
});

如果单击下一个或上一个按钮，则更改动画

1 个答案: