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

在更改图片之前，只需从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;
}

在导航过程中维护阵列的位置

1 个答案: