Question

我正在尝试创建一个数组循环，它只改变div的背景，只有一个循环。代码如下;

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

var i = 1;
var index = 0;
var iterations = 0;
var interval = setInterval(autoImgB(), 2000);

function autoImgB(arr1, id){
  var url = 'url(' + arr1 [i] + ')';
  if(index >= arr1.length) {
      index = 0;
      iterations++;
  }
  document.getElementById(id).style.backgroundImage = url;
      if (iterations >= 2) {
          clearInterval(interval);
      }  else {index++}
}

代码被调用，如onclick="autoImgB(ImagesF, 'DIV')"它似乎正在尝试工作，它确实改变了第一个图像，然而它似乎并没有将参数传递给下一个迭代，什么我做错了吗？

- 更新 -

我试图添加以下代码来传递函数调用autoImgB(ImagesF, 'DIV')期间最初传递的参数，但是我收到一个错误，指出＆＃34; arr1未定义＆＃34;。

var index = 0;
var iterations = 0;
var interval = setInterval(function() {
autoImgB(arr1, id);
}, 2000);

function autoImgB(arr1, id){
  var url = 'url(' + arr1 [index] + ')';
  if(index >= arr1.length) {
    index = 0;
    iterations++;
  }
  document.getElementById(id).style.backgroundImage = url;
    if (iterations >= 2) {
        clearInterval(interval);
    }  else {index++}
}

- 更新2 -

@Andy，要求我发布我的嵌套DIV以获得进一步的帮助，包含中的DIV结构如图所示;

＆＃13;

var ImagesF = [];
ImagesF[0]="image1.png";
ImagesF[1]="image2.png";
ImagesF[2]="image3.png";

var n = 0;

function autoImgB(arr1) {
    var url = 'url(' + arr1 [n] + ')';
    if (n < arr1.length) {
	document.getElementById('DIV3').style.backgroundImage = url;
    setTimeout(autoImgB, 2000, arr1, ++n);
	console.log(url,n)
  }
}

＆＃13;

.DIV1{
    position:absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height:100%;
    background-image:url('');
    background-color: none;
    display: none;
    z-index: 2;
}

.DIV2{
    position:absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height:100%;
    background-image:url('');
    background-color: none;
    display: none;
    z-index: 1;
}

.DIV3{
	position:absolute;
    top: 40px;
    left: 417px;
    width:105px;
    height:130px;
	background-image:url('');
    background-color: none;
    display: block;
	z-index: 2;
}

＆＃13;

<div class="holder">
<div class="DIV1" id="DIV1"></div>
<div class="DIV2" id="DIV2"></div>
<div class="DIV3" id="DIV3"></div>
</div>

<button style="cursor:pointer" onclick="autoImgB(ImagesF)">Press</button>

＆＃13;

我想要做的是能够通过功能中的ID来调用它，例如：autoImgB（ImagesF，＆＃39; DIV3＆＃39;）。

Answer 1

setInterval期望函数作为其第一个参数

var interval = setInterval(function() {
     autoImgB(ImagesF, 'DIV');
}, 2000);

Answer 2

您创建的代码中唯一错误的是您将autoImgB函数undefined的返回值传递给setInterval函数，但是setInterval函数只接受function或代码string。

setInterval

的文档

我已根据您的代码创建了example，以向您展示它将如何运作。

Answer 3

行。因此，主要问题是您是立即调用函数而不是将函数的引用传递给setInterval。

 var interval = setInterval(autoImgB, 2000);

另一个问题是你没有向函数传递任何参数。有两种方法可以做到这一点。第一种是在时间之后将它们作为附加参数传递：

var interval = setInterval(autoImgB, 2000, ImagesF, 0);

第二种是在setInterval回调中调用函数本身：

var interval = setInterval(function () {
  autoImgB(ImagesF, 0);
}, 2000);

另一个问题是，您的HTML看起来并不清楚。您似乎正在获取具有特定id的元素，但正在传递div作为参数。所以要么你有一个像<div id="div"></div>这样的元素，要么正在发生其他事情。你应该仔细研究一下。

如果您使用setTimeout而不是setInterval，那么您可以大大缩短代码，因为您只需要进行最少的检查，并且无需在任何时候清除计时器。只需检查索引是否小于数组长度并再次调用该函数。

var div = document.querySelector('div');

function autoImgB(arr, i) {
  if (i < arr.length) {
    div.style.backgroundImage = 'url("' + arr[i] + '")';
    setTimeout(autoImgB, 2000, arr, ++i);
  }
}

autoImgB(ImagesF, 0);

documentation states与setTimeout。

循环阵列改变Div的背景图像

3 个答案: