将增量值插入循环数组

Inserting incremental values into loop array

本文关键字:循环 数组 插入      更新时间:2023-09-26

现在我通过将多个图像与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

试试这个:它会根据索引值继续改变地球的图像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">

请尝试一下:

var img = 0;
var slides = new Array(); 
while (img < 5) {
img++;
var src = 'assets/images/earth/Sequence%0100' + img + '.jpg';
slides.push(src);
}

这是答案的一部分,当img值为999时,它将修复它,因为他有200个图像,如果图像数> 1000,当img999时,他需要另一个。请告诉我是否应该删除这个答案:

更新:

 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++;
}

检查这个拨弄看看它的作用