0

我正在我的一个页面上实现图像旋转器，但是我也想在另外两个页面上重新使用代码。我还希望每个页面以与其他页面不同的顺序旋转图像。我认为这可以通过声明不同的数组并用唯一的 id 调用它们来解决。

代码如下

 var ImageArr1 = new Array("/assets/function.jpg","assets/takeaway.jpg","/assets  /delivery.jpg");
 var ImageHolder1 = document.getElementById('Rotating1');


 var ImageArr2 = new Array("/assets/takeaway.jpg","/assets/function.jpg","/assets/delivery.jpg");
 var ImageHolder2 = document.getElementById('Rotating2');

  function RotateImages(whichHolder,Start)
  {
  var a = eval("ImageArr"+whichHolder);
   var b = eval("ImageHolder"+whichHolder);
  if(Start>=a.length)
  Start=0;
  b.src = a[Start];
  window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",3000);
  }

  RotateImages(1,0);
  RotateImages(2,0);

我的HTML如下-Page1

<img src="/assets/function.jpg" name="Rotating" id="Rotating1" width="260" height="180" alt="">

第2页

<img src="/assets/takeaway.jpg" name="Rotating" id="Rotating2" width="260" height="180" alt="">

我正在慢慢学习 Javascript，但这让我很难过

任何帮助表示赞赏

4

1 回答 1

1

您遇到的问题实际上是一个错误。通过调用 b.src，您断言 b 已定义，但您的 ImageHolder 可能不存在。特别是通过在 page1 上调用 RotateImage(2... 或在 page2 上调用 RotateImage(1...

您可能会尝试的第一件事是从您的大脑中删除 eval 。你可以简单地使用 window["ImageArr"+whichHolder]，它会好得多。

接下来，将函数的末尾（最后两行）替换为

if(b) {
    b.src = a[Start];
    window.setTimeout("RotateImages("+whichHolder+", "+(Start+1)+")", 3000);
}

接下来，您可以学习使用函数而不是字符串来调用 setTimeout：

window.setTimeout(function() {
    RotateImages(whichHolder, Start+1);
}, 3000);

最后，更多的是代码约定，经典变量和函数的第一个字母不大写。所以它可能是旋转图像并开始。

于 2012-06-11T21:28:54.113 回答