1

我想获得：

淡出 1° 图像 -> 淡入 1° 图像 -> 等待 2 秒 -> 淡出 2° 图像 -> 淡入 2° 图像 -> 等待 2 秒 -> 淡出 3° 图像 -> 淡入 3° 图像 -> 等待 2 秒 - >淡出1°图像......

这是代码：

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

JS：

var numberOfGroups = 3;
var arrayOfArray = new Array(numberOfGroups);
for(var i = 0; i < numberOfGroups; i++)
{
    arrayOfArray[i] = new Array();
}
var imagesElements = $('.container').children();
imagesElements.each(function(localIndex){
    //partiziono le immagini in insiemi in base all'ordine in cui le trova in partenza
    arrayOfArray[localIndex % numberOfGroups].push(imagesElements[localIndex]);
});
$('.container').empty();
for(var j = 0; j < arrayOfArray.length; j++)
{
    //crea un nuovo div contenitore contenente le immagini come sono nell'array 2-dimensioni creato
    var newDivContainer = document.createElement('div');
    newDivContainer.setAttribute('id', 'block_'+j);
    for(var k = 0; k < arrayOfArray[j].length; k++)
    {
        newDivContainer.appendChild(arrayOfArray[j][k]);
    }

    $('.container').append(newDivContainer);
}

var newGroups = $('.container').children();
newGroups.each(function(thisIndex){
    $(newGroups[thisIndex]).cycle({
        fx:     'fade',
        delay: 2000,
        speed: 2000,
        //continuous: 1,
        timeout: 2000*numberOfGroups,
        //sync: 0,
        after: function(){
            var x = '#block_'+((thisIndex+1) % numberOfGroups);
            change(x);
            //window.setTimeout(change, 4000, x);
        }
    });
});

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

JSFIDDLE：http: //jsfiddle.net/linuxatico/5e7X7/

4

1 回答 1

7

您真正需要做的就是适当地设置延迟和超时选项。您可以使用每个组的索引来增加初始延迟选项，然后从中减去总动画时间，以便您的动画立即开始。例子：

var animationDelay = 4000*numberOfGroups - 2000; 
$("#test").cycle({ 
    delay: (4000 * thisIndex) - animationDelay,
    speed: 2000,
    timeout: animationDelay
});

为您更新了小提琴，应该是您正在寻找的：http: //jsfiddle.net/5e7X7/3/

于 2013-02-28T18:06:40.033 回答