javascript - 简单脚本不运行

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

我认为这是一种更好的方法，因为没有包含重复内容的数组。