イメージを使用してアレイを循環させる方法

Question

ボタンをクリックし、アレイが自動的に一定の速度でイメージを循環し、アレイサイクルが決して終了しないようにする方法を知りたい。

私はオリジナルのコードを使用しています。ユーザーがボタンをクリックするたびに画像がどのように変わるのですか。ボタンを1回クリックするだけで、イメージは常に循環します。事前ここ

で おかげで私のコードです：コメントの場所での使用画像で

<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

これはの最後に=あなたは私を移動する必要があるので、私は、あなたが取得したい右のものを理解していれば、私+ 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

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

を解決します

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