Как циклически перемещаться по массиву с изображениями

Question

Я хочу знать, как щелкнуть по кнопке, и чтобы массив автоматически переключался между изображениями с определенной скоростью за интервал и никогда не заканчивался цикл массива. Пожалуйста, помогите мне с этим

У меня есть исходный код, где каждый раз, когда пользователь нажимает кнопку, изображение меняется, как я могу его получить, так что ему требуется только один щелчок на кнопке, и изображения будут постоянно циклироваться. Заранее спасибо

Вот мой код:

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

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

Answer 2

в изображениях комментарий место назначения [Изображение NUMBER], как вы хотите.

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