javascript - 导航期间保持阵列的位置

我有一系列图像，可用来替换点击时的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函数，它将从下一个图像开始，即：，然后将向后工作。我打算让它从当前图像倒退，反之亦然。

任何帮助表示赞赏。

最佳答案

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

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