javascript - jQuery-Cycle:如何改变每个新图像的过渡效果

Question

这正是我想要完成的。让每张图片都显示不同的过渡效果。

你能帮我修复并找出我的代码有什么问题吗？

jQuery:

var url = 'http://www.mywebsite.com/';
var img_dir = '_img/slideshow/';
var fx =
    [
    'blindX', 
    'blindY', 
    'blindZ', 
    'cover', 
    'curtainX', 
    'curtainY', 
    'fade', 
    'fadeZoom', 
    'growX', 
    'growY', 
    'scrollUp', 
    'scrollDown', 
    'scrollLeft', 
    'scrollRight', 
    'scrollHorz', 
    'scrollVert', 
    'shuffle', 
    'slideX', 
    'slideY', 
    'toss', 
    'turnUp', 
    'turnDown', 
    'turnLeft', 
    'turnRight', 
    'uncover', 
    'wipe', 
    'zoom'
    ];
var index = 0;

$(function() {
    var $slideshow = $('#slideshow'); 
    // add slides to slideshow (images 2-3) 
    for (var i = 2; i < 13; i++) 
        $slideshow.append(
            '<a href="' + url + img_dir + i+'.jpg" title="Slideshow">'+
                //src="http://www.mywebsite.com/_img/slideshow/"
            '<img src="' + url + img_dir + i+'.jpg" width="100" height="100" />'+
            '</a>'); 
    // start the slideshow 
    $slideshow.cycle(
    {
        if( index < fx.length ) { index++; }
        else { index = 0; }
        fx:      fx[index],
        timeout: 3000
    });
});

Answer 1

要使用所有效果非常简单:

http://jsfiddle.net/lucuma/tcRCj/14/

$('#slideshow').cycle({fx:'all'});​

此外，如果您只想指定某些:

$('#slideshow').cycle({fx:'scrollDown,scrollLeft,fade'});

如果您不想随机化效果顺序(默认情况下会随机化):

$('#slideshow').cycle({fx:'scrollDown,scrollLeft,fade', randomizeEffects:0});