0

次々に表示したい一連の画像があります。キッカーは、各画像が表示されるまでの時間を設定する必要があることです。

ここに私のコードがあります

       setTimeout(function() {
            images[0].transitionTo({
                opacity: 1,
                duration: 0
            });
        }, 200);

        setTimeout(function() {
            images[1].transitionTo({
                opacity: 1,
                duration: 0
            });
        }, 400);

        setTimeout(function() {
            images[2].transitionTo({
                opacity: 1,
                duration: 0
            });
        }, 600);

..etc（約35枚の画像があります）

ループで同じことをどのように表現できますか? KinetciJS ライブラリを使用しています

set interval または set timeout を使用しようとしましたが、タイマーが待機している間ループが繰り返され、配列が範囲外になります。

ご協力いただきありがとうございます。

4

4 に答える 4

1

このような：

/**
 * Loop images every second.
 */
(function() loopImages() {
   var interval = 1000,
       numOfImage = 35,
       currImage = 1;
   function loop() {
       if (currImage > numOfImage) {
           currImage = 1;
       }
       // display current image in your way.
   }
   setInterval(loop, interval);
})()
于 2013-05-16T16:04:25.110 に答える
1

もう 1 つのオプションは、従来のループの代わりにインクリメンタを使用することです。画像コレクションが配列であることを知っていたので、'currentIteration' 変数を使用して現在のインデックス位置を追跡し、initAnimation() 関数を呼び出して開始しました。これにより、すべてが非常に一般的なものになり、画像の数に関係なく機能するはずです。

これにより、ループに制限されることなく、次の画像アニメーション メソッドがいつ呼び出されるかを制御できます。また、期間が割り当てられている場合は、トランジションが完了したときにのみ呼び出されるように拡張できます。 

var images = ['pic1','pic2','pic3','pic4','pic5'];
var currentIteration = 0;

function initAnimation(){
    animate();
}

function animate(){
    if(currentIteration < image.length){
        window.setTimeout(
        function(){transition()}
        ,800)
    }
}

function transition(){
    images[currentIteration].transitionTo({
        opacity: 1,
        duration: 0
            });
    currentIteration++;
    animate();
}
于 2013-05-16T16:14:18.887 に答える
1

これを試して...

var numberOfImages = 35;
for(var i = 0; i < numberOfImages; i++) {
   setTimeout(function() {
        images[i].transitionTo({
            opacity: 1,
            duration: 2
        });
    }, (200 * (i + 1)) );
}

お役に立てれば。

于 2013-05-16T15:57:12.200 に答える
0

このようなものがうまくいくかもしれません（これはテストされていないことに注意してください）

  var images; // your images
  var idx = 0; //start index
function transition(){
if(idx < images.length){
var image = images[i];
image.transitionTo({
    opacity: 1,
      duration: 0
     });
    idx++;
}else{
 window.clearInterval(intVal);   
}
}
var intVal = window.setInterval(transition,200);
于 2013-05-16T15:58:20.577 に答える