Простой скрипт не запускается

Question

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

JavaScript код:

function cambiaimagen() 
{ 
var i=1; 
var direcciones = new    
    Array("imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg"); 
var vusr = document.getElementById('imgs').value; 
document.getElementById('imgs').innerHTML = vusr; 
} 

HTML-код:

<div id="contenedor"> 

<div id="img"> 
<img id="imgs" src="imagen1.jpg"/> 
</div> 

<button type="button">Anterior</button> 
<button type="button" onclick = 'cambiaimagen()'>Siguiente</button> 

</div> 

Когда я запускаю сценарий я смотрю изображение 1 и кнопки. Но когда я нажимаю кнопку Siguiente, я не смотрю следующий образ массива direcciones.

Как я могу посмотреть его?

Спасибо.

Answer 1

Замените предыдущий код JavaScript с этим:

var cnt = 1; 
var direcciones = new Array("imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg"); 
function cambiaimagen(){ 
    if(cnt != direcciones.length - 1){ 
     cnt++; 
    }else{ 
     cnt = 1; 
    } 
    document.getElementById('imgs').src = direcciones[cnt]; 
} 

Если имена изображений в последовательном порядке номеров (как в вашем примере), вы можете использовать следующие вместо:

var cnt = 1; 
var imgCnt = 5; 
function cambiaimagen(){ 
    if(cnt != imgCnt){ 
     cnt++; 
    }else{ 
     cnt = 1; 
    } 
    document.getElementById('imgs').src = "imagen" + cnt + "2.jpg"; 
} 

Я считаю, что это лучший метод, потому что нет массива с повторяющимся содержимым.

Answer 2

var direcciones = ["imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg"]; 
var cnt = 0; 
function cambiaimagen(){ 
document.getElementById("imgs").src = direcciones[(++cnt)%direcciones.length]; 
}