Question

现在我通过将多个图像与setInterval(showNextSlide, 100);串在一起来制作动画图像，效果非常好。

我遇到的唯一问题是动态地将值添加到var slides = [src, ]，while循环只会加载最终图像。

同样保存图像的方式是增量移动到下一个零，所以01009转换为01010每当我使用我的循环时它将转换为010010注意额外的零端。

的Javascript

window.onload = function() {
  var img = 0
  while (img < 15) {
    img++;
  }
  var src = 'assets/images/earth/Sequence%0100' + img + '.jpg.';
  var slides = [src, ],
    index = 0,
    timer = 0;

  // Show the first slide
  showNextSlide();

  // Show "next" slide every five seconds
  timer = setInterval(showNextSlide, 100);

  // The function we call to show the "next" slide    
  function showNextSlide() {
    if (index >= slides.length) {
      index = 0;
    }
    document.getElementById('earth').src = slides[index++];
  }
};

JsFiddle

Answer 1

试试这个：它将继续根据索引值改变地球的图像src。

根据JEES评论进行更新。

<script>

  window.onload = function() {
       var i = 0

  var slides = [];
  while (i < 200) {

      if(i <= 9){ img= '0100' + i++; }
      else if(i <= 99){ img= '010' + i++; }  
      else{ img= '01' + i++; }  
      var src = 'assets/images/earth/Sequence%' + img + '.jpg';
      slides.push(src);    
    }

        console.log(slides);
        index = 0,
        timer = 0;

      // Show the first slide
      showNextSlide();

      // Show "next" slide every five seconds
      timer = setInterval(showNextSlide, 100);

      // The function we call to show the "next" slide    
      function showNextSlide() {
        if (index >= slides.length) {
          index = 0;
        }
        document.getElementById('earth').src = slides[index++];
      }
    };
</script>
<img src="" id="earth">

Answer 2

请尝试一下：

var img = 0;

var slides = new Array(); 

while (img < 5) {

img++;

var src = 'assets/images/earth/Sequence%0100' + img + '.jpg';

slides.push(src);

}

Answer 3

这是答案的一部分，它将在img值为9或99时修复，因为他有200张图片，如果图片编号为＆gt; 1000 img值999时他需要另一个..请告诉我是否应删除此答案：

<强>更新：

 var img = 0;
 while(img < 200) {
    if (img < 10) { imgURL = '0100' + img; }
    else if (img < 100) { imgURL = '010' + img;}
    else { imgURL = '01' + img; }
    slides.push('assets/images/earth/Sequence%' + imgURL + '.jpg');
    img++;
}

检查此Fiddle以查看其实际效果。

将增量值插入循环数组中

3 个答案: