JQuery循环插件洗牌权

修正！真不敢相信我以前没见过这个：

$('#s4') 
        .before('<div id="nav">') 
        .cycle({ 
            fx:     'shuffle', 
            speed:  500, 
            shuffle: { top:15, left: 300 },
            timeout: 0, 
            pager:  '#nav',
            cleartypeNoBg:true
    });

到

唯一的问题是，我正在洗牌的图像非常大，并且在图像之间的转换过程中创建了一个水平滚动条。这不会发生在它向左移动的时候，我不确定我错过了什么。下面是洗牌效果的片段。感谢您的帮助

// shuffle
$.fn.cycle.transitions.shuffle = function($cont, $slides, opts) {
    var i, w = $cont.css('overflow', 'visible').width();
    $slides.css({left: 0, top: 0});
    opts.before.push(function(curr,next,opts) {
        $.fn.cycle.commonReset(curr,next,opts,true,true,true);
    });
    // only adjust speed once!
    if (!opts.speedAdjusted) {
        opts.speed = opts.speed / 2; // shuffle has 2 transitions
        opts.speedAdjusted = true;
    }
    opts.random = 0;
    opts.shuffle = opts.shuffle || {left:+w, top:15};
    opts.els = [];
    for (i=0; i < $slides.length; i++)
        opts.els.push($slides[i]);

    for (i=0; i < opts.currSlide; i++)
        opts.els.push(opts.els.shift());

    // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
    opts.fxFn = function(curr, next, opts, cb, fwd) {
        var $el = fwd ? $(curr) : $(next);
        $(next).css(opts.cssBefore);
        var count = opts.slideCount;
        $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() {
            var hops = $.fn.cycle.hopsFromLast(opts, fwd);
            for (var k=0; k < hops; k++)
                fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop());
            if (fwd) {
                for (var i=0, len=opts.els.length; i < len; i++)
                    $(opts.els[i]).css('z-index', len-i+count);
            }
            else {
                var z = $(curr).css('z-index');
                $el.css('z-index', parseInt(z)+1+count);
            }
            $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() {
                $(fwd ? this : curr).hide();
                if (cb) cb();
            });
        });
    };
    opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
};

//洗牌
$.fn.cycle.transitions.shuffle=函数（$cont、$slides、opts）{
变量i，w=$cont.css（'overflow'，'visible'）.width（）；
$slides.css（{left:0，top:0}）；
选择前推（功能（当前、下一步、选择）{
$.fn.cycle.commonReset（当前、下一步、选项、真、真、真）；
});
//只需调整一次速度！
如果（！选择速度调整）{
opts.speed=opts.speed/2；//洗牌有2个转换
opts.speedAdjusted=true；
}
opts.random=0；
opts.shuffle=opts.shuffle | |{左：+w，顶部：15}；
opts.els=[]；
对于（i=0；i<$slides.length；i++）
opts.els.push（$slides[i]）；
对于（i=0；i

HTML

您没有发布任何html，而是将

溢出：隐藏
添加到溢出容器的css中（获取滚动条）。您可能需要使用before/after钩子来控制这一点，以便页面布局在转换完成后恢复正常
 您没有发布任何html，而是将
overflow:hidden
添加到溢出容器的css中（获取滚动条）。您可能需要使用before/after钩子来控制这一点，以便页面布局在转换完成后恢复正常
 它可能是前/后挂钩。我试着改变溢出，图像看起来好像消失在一堵看不见的墙后面。可能是前/后挂钩。我试着改变溢出，图像看起来就像消失在一堵看不见的墙后面。
opts.shuffle = opts.shuffle || {left:+w, top:15};

// shuffle
$.fn.cycle.transitions.shuffle = function($cont, $slides, opts) {
    var i, w = $cont.css('overflow', 'visible').width();
    $slides.css({left: 0, top: 0});
    opts.before.push(function(curr,next,opts) {
        $.fn.cycle.commonReset(curr,next,opts,true,true,true);
    });
    // only adjust speed once!
    if (!opts.speedAdjusted) {
        opts.speed = opts.speed / 2; // shuffle has 2 transitions
        opts.speedAdjusted = true;
    }
    opts.random = 0;
    opts.shuffle = opts.shuffle || {left:+w, top:15};
    opts.els = [];
    for (i=0; i < $slides.length; i++)
        opts.els.push($slides[i]);

    for (i=0; i < opts.currSlide; i++)
        opts.els.push(opts.els.shift());

    // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!)
    opts.fxFn = function(curr, next, opts, cb, fwd) {
        var $el = fwd ? $(curr) : $(next);
        $(next).css(opts.cssBefore);
        var count = opts.slideCount;
        $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() {
            var hops = $.fn.cycle.hopsFromLast(opts, fwd);
            for (var k=0; k < hops; k++)
                fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop());
            if (fwd) {
                for (var i=0, len=opts.els.length; i < len; i++)
                    $(opts.els[i]).css('z-index', len-i+count);
            }
            else {
                var z = $(curr).css('z-index');
                $el.css('z-index', parseInt(z)+1+count);
            }
            $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() {
                $(fwd ? this : curr).hide();
                if (cb) cb();
            });
        });
    };
    opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 };
};

<div id="contentAreaJS" class="contentArea">
    <div id="s4" class="pics">
        <div id="navlist">
        <ul>
            <li id="mon"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_fajitas.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
            <li id="tue"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_tacos.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
            <li id="wed"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_chips.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
            <li id="thur"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_dessert.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
            <li id="fri"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_burger.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li>
        </ul>
    </div>
        <a href="https://www.chilistogo.com/Pages/Welcome.aspx" target="_blank"><img src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilispartyPlatters.png" height="237" width="769" /></a>
    <a href="http://www.chilis.com/EN/HappyHours/001.005.0609.pdf" target="_blank"><img src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilishappyHour.png" height="237" width="769" /></a>
        </div>     
    </div>