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 に答える