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 回答