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 库

我尝试使用设置间隔或设置超时，但在计时器等待并且数组超出范围时循环不断迭代。

谢谢你提供的所有帮助。

4

4 回答 4

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

另一种选择是使用增量器而不是传统的循环。知道您的图像集合是一个数组，我使用“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 回答
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 回答