如何循环遍历带有图像的数组答案

【问题标题】：How to cycle through a array with images如何循环遍历带有图像的数组
【发布时间】：2016-12-11 22:44:26
【问题描述】：

我想知道如何单击按钮并让阵列以每个间隔以一定速度自动循环图像，并使阵列循环永不结束。请帮我解决这个问题

我有我的原始代码，每次用户单击按钮时，图像都会改变我如何获取它，因此它只需要单击一个按钮并且图像会不断循环。提前致谢

这是我的代码：

<img id="colour" src="C:/images/i1">
<button type="button" onclick="light_change()">Cycle Through</button>
<script>
  var assets = [
  "C:/images/i2",
  "C:/images/i3",
  "C:/images/i1"
  ]

  i = 0
  function light_cycle(){
    
  i = i+1
  if(i==assets.length)i=0
  var x =        document.getElementById('colour');
  x.src=assets[i]
  }
</script>

【问题讨论】：

您可以将代码添加到问题中，并在此处查看：minimal reproducible example
@Kenny 或者 window.setInterval 更适合永无止境的循环

标签： javascript html arrays

【解决方案1】：

这会解决你的问题

 function light_cycle(){
 window.setInterval(function() {
   i = i+1
   if(i==assets.length)i=0
   var x =        document.getElementById('colour');
   x.src=assets[i]
}, 2000);
}

【讨论】：

非常感谢，帮助加载
我不想问，但你介意解释一下代码吗，因为我希望能够完全理解它，尽管它对你们来说很简单@Kenny
看看window.setInterval函数......它以指定的间隔（以毫秒为单位）调用一个函数......我上面的案例间隔是2000毫秒（2秒） .因此，每 2 秒编写一次函数就会被调用

【解决方案2】：

在评论处随意使用 images[imageNumber]。

var images = ['imageA.jpg','imageB.jpg','imageC.jpg'];
var getButton = document.getElementById('but');
var getImgContainer = document.getElementById('imgContainer');
var slideTime = 2000;

getButton.onePush = false;

getButton.addEventListener('click',function(event){
  
  if(this.onePush) return;
  this.onePush = true;
  
  var imageNumber = 0;
  var newInterval = setInterval(function(){
    
    //do something with your urls HERE
    console.log(images[imageNumber]);
    getImgContainer.setAttribute('src',images[imageNumber]);
    
    if(imageNumber===images.length-1) {
      imageNumber = 0;
    } else {
      imageNumber++;
    }
  },slideTime);
  
});

img {
  width:200px;
  height:200px;
  border:solid 1px #33aaff;
}

<button id="but">click me</button>
<br/><br/>
<img src="" id="imgContainer"/>

【讨论】：

非常感谢它的帮助

【解决方案3】：

如果我理解你想要得到的东西，那么你需要像这样将 i = i+1 移动到函数的末尾：

function light_cycle(){
 window.setInterval(function() {
   if(i==assets.length)i=0
   var x =        document.getElementById('colour');
   x.src=assets[i]
   i = i+1
}, 3000);
}

【讨论】：