Как сделать бесконечную смену картинок?

Question

[lemonlimelike]

var i = 0;
		var image = document.getElementById("image");
		var imgs = new Array('play.png','pause.png','play.png','pause.png'); // Добавте свои картинки через запятую
		function imgsrc(){
			i++;
			image.src=imgs[i];
		}

<input id="image" type="image" src="play.png" onClick="PlayPauseVideo(); imgsrc();" />

При нажатие на эту кнопку картинки меняются, но только 4 раза, а как сделать, чтоб они менялись бесконечно?

Answer 1

[Сергей Соколов]

Можно использовать остаток от деления i на число картинок:

var i = 0;
    var image = document.getElementById("image");
    var imgs = new Array('play.png','pause.png','play.png','pause.png'); // Добавте свои картинки через запятую
    function imgsrc(){
      i++;
      image.src=imgs[i%imgs.length];
    }

Если захотите притормозить смену картинок, можно так:

var i = 0;
var image = document.getElementById("image");
var imgs = new Array('play.png','pause.png','play.png','pause.png'); // Добавте свои картинки через запятую
function nextImage(){
  if(i++ >= imgs.length) i = 0; 
  image.src=imgs[i];
}
function imgsrc() { window.setInterval( nextImage, 500) }