Question

我想知道如何点击按钮让阵列以每个间隔的特定速度自动循环显示图像，并让阵列周期永远不会结束。请帮帮我这个

我有我的原始代码，每当用户点击一个按钮时，图像就会改变我如何获得它，这样它只需要点击一次按钮，图像就会不断循环。提前致谢

这是我的代码：

＆＃13;

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

＆＃13;

Answer 1

在评论地点使用图像[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"/>

Answer 2

这将解决您的问题

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

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

如何使用图像循环数组

3 个答案: