javascript - 循环遍历 Javascript 数组的索引时重置变量

Question

我正在尝试使用 javascript/jQuery 创建背景图像“ slider ”。这个想法是单击一个 anchor 并分别向前或向后移动图像。我的文件名位于名为“images”的数组中。

它有效，但我不知道如何将最后一个图像恢复到第一个图像，反之亦然。在我的控制台中，它抛出一个 undefined variable 。这是我的代码:

var i = 0;
var arrayLength = images.length - 1;
currentImage(0); //show the first photo initially

function currentImage(i) {
    $('#image').css("background-image", "url(img/" + images[i] + ")");
    if ( i > arrayLength ) {
      $('#image').css("background-image", "url(img/" + images[0] + ")");
      i = 0;
      return;
    }
    console.log(i);
}

$('#prev').click(function(){
    i--;
    currentImage(i);
});
$('#next').click(function(){
    i++;
    currentImage(i);
});

<小时/>

我尝试过使用“if (i = undefined) {i=0; console.log("works");}”和“if (i > arrayLength) {i=0; console.log("works ");}"这两种方法都产生了成功的控制台日志，但这两种方法似乎都没有重置 i。

我似乎无法在 SO 上找到类似的线程，但也许我正在搜索错误的东西。任何帮助，或者正确方向的一点都会很棒。谢谢!

Answer 1

在将i传递给currentImage之前检查它

var i = 0;
var arrayLength = images.length - 1;
currentImage(0); //show the first photo initially

function currentImage(i) {
    $('#image').css("background-image", "url(img/" + images[i] + ")");
}

$('#prev').click(function(){
    i--;
    if(i < 0) i = arrayLength;
    currentImage(i);
});

$('#next').click(function(){
    i++;
    if(i > arrayLength) i = 0;
    currentImage(i);
});