javascript - 在导航过程中保持阵列的位置

Question

我有一组图像，用于在单击时替换 DIV 背景。我有两个按钮(基本上是前进和后退)，我想要完成的是前进(或后退)按钮在执行函数之前保持数组的最后位置，这里是代码；

var ImagesB = []; 
ImagesB[0]="images/image1.png";
ImagesB[1]="images/image2.png";
ImagesB[2]="images/image3.png";

var i = 1;

function updateImgB(){
  var url = 'url(' + ImagesB[i] + ')';
    document.getElementById('DIV1').style.backgroundImage = url;
    i = (i + 1)%(ImagesB.length);
}

function reverseImgB(){
  var url = 'url(' + ImagesB[i] + ')';
    document.getElementById('DIV1).style.backgroundImage = url;
    i = (i - 1)%(ImagesB.length);
    if(i < 0){i = ImagesB.length - 1};
}

目前这是可行的，但是假设您执行updateImgB，它以数组中的下一个数字结束，例如:i + 1，因此如果我执行reverseImgB 函数，它从下一张图像开始，即:2，然后向后工作。我的目的是让它从当前图像向后工作，反之亦然。

感谢任何帮助。

Answer 1

在更改图像之前，只需从 i 中减去 1:

function reverseImgB(){
    i = (i - 1)%(ImagesB.length);
    if(i < 0){i = ImagesB.length - 1};
    var url = 'url(' + ImagesB[i] + ')';
    document.getElementById('DIV1).style.backgroundImage = url;
}