javascript - 使用 JavaScript 和按钮更改数组元素

Question

代码:

var pictures = ["url(bildes/unity.png)", "url(bildes/xna.png)", "url(bildes/bge.png)"];
var countthearray = pictures.length;
var i = 0;
function MoveOneUp(){
    i++;
    document.getElementById("slaideris").style.backgroundImage=pictures[i];
    if (i == countthearray-1) {
        i =-1;
    }
}
function MoveOneDown(){
    --i;
    document.getElementById("slaideris").style.backgroundImage=pictures[i];
    if (i<0){
        i=countthearray;
    }
}

我正在尝试通过附加了 JS 的按钮来更改元素的背景图像。如果我使用函数 MoveOneUp() 一切正常，但函数 MoveOneDown() 似乎有某种我不明白的问题。

每当我到达数组的最后一项时，我必须单击两次，然后它才会返回数组长度值。有人可以解释一下问题出在哪里以及如何解决它吗？

Answer 1

在实际使用该值设置背景之前尝试检查边界:

var pictures = ["url(bildes/unity.png)", "url(bildes/xna.png)", "url(bildes/bge.png)"],
countthearray = pictures.length,
i = 0,
slider = document.getElementById("slaideris"); // cache the element

function MoveOneUp(){
  if (i == countthearray)
    i = 0;
  slider .style.backgroundImage=pictures[i];
  i++;
}
function MoveOneDown(){
  if (i<0)
    i=countthearray -1;
  slider .style.backgroundImage=pictures[i];
  --i;
}