Question

我想要一个接一个地显示一系列图像。踢球者需要在每个图像显示之间设置一段时间。

这是我的代码

       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);

..等（我有大约35张图片）

如何在循环中表达相同的内容？我正在使用KinetciJS库

我尝试使用set interval或set timeout，但是当定时器等待并且数组超出范围时，循环会继续迭代。

感谢您提供任何帮助。

Answer 1

试试这个......

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

希望这有帮助。

Answer 2

像这样：

/**
 * 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);
})()

Answer 3

另一种选择是使用增量器而不是传统的循环。知道你的图像集是一个数组，我使用'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();
}

Answer 4

这样的事情可能会起作用（请注意这是未经测试的）

  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);

如何在javascript中创建一个图像动画循环

4 个答案: