0

例如，我有 9 张图片，从一开始就显示了 3 张。我想让它们依次淡出到另一个图像一次，例如：http: //jsfiddle.net/linuxatico/C9Tw2/7/

在这个版本中，我有 3 个循环调用，由定时初始化分隔。我发现，使用 3 个不同的周期，时间越长，重叠褪色图像的时间效果就越多。我相信这可以通过一个循环动画来解决，但我不知道该怎么做。你有解决方案吗？

HTML：

<div class="container">
    <ul class="first">
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /></li>
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" /></li>
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /></li>
    </ul>
    <ul class="second">
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00001.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00002.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00003.jpg" /></li>
    </ul>
    <ul class="third">
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00004.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00005.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00006.jpg" /></li>
    </ul>
</div>

JS：

jQuery('.first').cycle({
    fx:     'fade',
    delay:  -1000
});
jQuery('.second').cycle({
    fx:     'fade',
    delay:  -2000
});
jQuery('.third').cycle({
    fx:     'fade',
    delay:  -3000
});

编辑：我在这里有一个稍微不同的要求：3 个转换，转换之间的暂停时间

4

1 回答 1

1

您可以向转换结束添加回调。

jQuery('.first').cycle({
    fx:     'fade',
    delay:  -1000,
    after: function(){change('.second')}
});
jQuery('.second').cycle({
    fx:     'fade',
    timeout: 0,
    after: function(){change('.third')}
});
jQuery('.third').cycle({
    fx:     'fade',
    timeout: 0,
});

function change(what)
{
    jQuery(what).cycle("next");
}

JSFiddle：http: //jsfiddle.net/c7UXM/

于 2013-02-19T15:32:12.803 回答