使用javascript在按钮单击时更改图片答案

【问题标题】：making pictures change on button click with javascript使用javascript在按钮单击时更改图片
【发布时间】：2014-07-14 07:14:39
【问题描述】：

我有存储在数组中的图片链接，当单击按钮时，我使用这些图片链接更改 div 的背景。

到目前为止一切正常，但我不明白当 i 值大于 array.length 值时，如何让函数返回数组的第一个值 ([0])。

这是我得到的：

function palabifunkcija(){
    document.getElementById('PictureContent').value= ++i;
    document.getElementById('PictureContent').style.background= bildes[i];
    if (i>bildes.length){
        return i=0;
    } 
}

单击会使图片发生变化，但是当 if 语句执行时，我必须在按钮上单击两次，它会显示第二张图片 (bildes[1]) 而不是 bildes[0]。

谁能解释为什么会这样，我该如何解决它，让它正常工作？

抱歉英语不好。

【问题讨论】：

标签： javascript html arrays button

【解决方案1】：

您可以找到i 除以数组长度的余数。

var i = 0, 
    length = bildes.length;
function palabifunkcija(){
    i++;
    i %= length;
    document.getElementById('PictureContent').value = i;
    document.getElementById('PictureContent').style.background = bildes[i];
}

【讨论】：

谢谢，这很好用。现在我才明白它是如何工作的。
它总是按总长度“规范化”当前索引，防止它大于长度。假设长度为3； 0%3 == 0, 1%3 == 1, 2%3 == 2, 3%3 == 0 等等
我还是不明白它是如何工作的。据我了解 - 它划分了 2 个数字并显示了剩下的内容。我想情况并非如此，现在我很困惑。
如果我想让相同的过程倒退会怎样？我的意思是如果我希望数组值像这样 - 0;4;3;2;1;0;4.... 我需要使用 if 语句还是..？能给个提示吗？
我认为i--; i = i < 0 ? (length - 1) : i; 可以解决问题。当然var i = length - 1

【解决方案2】：

试试这个

function palabifunkcija(){
    i = (i+1) % bildes.length;
    document.getElementById('PictureContent').value= i;
    document.getElementById('PictureContent').style.background= bildes[i];    
}

【讨论】：