Wie man durch ein Array mit Bildern durchläuft

Question

Ich möchte wissen, wie man auf eine Schaltfläche klickt und das Array automatisch Bilder mit einer bestimmten Geschwindigkeit pro Intervall durchläuft, und den Array-Zyklus nie enden lassen. Bitte helfen Sie mir dabei

Ich habe meine Original-Code, wo immer der Benutzer eine Schaltfläche klickt das Bild ändert, wie bekomme ich es, so dass es nur einen einzigen Klick erfordert und die Bilder ständig durchlaufen. Vielen Dank im Voraus

Hier ist mein Code:

<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

dies wird Ihr Problem

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

in dem Kommentar Platz Verwendung Bildern [imageNumber], wie Sie wollen.

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

, wenn ich recht verstehe lösen, was Sie wollen, so dass Sie die i verschieben müssen = i + 1 bis zum Ende des die funktion wie folgt:

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