如何将事件添加到自动旋转图像？

Question

我正在使用以下脚本和后面的 onclick-event。如果我使用 onclick，我的旋转横幅就会丢失并开始以随机间隔显示图片。我想我应该重写第一段代码末尾的“setTimeout”。问题是具体如何？

<script language="JavaScript" type="text/javascript">
<!--
var RotatingImage1_Index = -1;
var RotatingImage1_Images = new Array();
RotatingImage1_Images[0] = ["images/ban_image1.png","",""];
<!-- 15 Images in total-->
RotatingImage1_Images[14] = ["images/ban_image2.png","",""];

function RotatingImage1ShowNext(){
RotatingImage1_Index = RotatingImage1_Index + 1;
   if (RotatingImage1_Index > 14)
   RotatingImage1_Index = 0;
   eval("document.RotatingImage1.src = RotatingImage1_Images[" + RotatingImage1_Index + "][0]");
   setTimeout("RotatingImage1ShowNext();", 4000);}
// -->
</script>
<img src="images/ban_image1.png" id="ban_img1" name="RotatingImage1">

这部分按其应有的方式工作。

<div id="ban_next" align="left">
<a href="#" onclick="RotatingImage1ShowNext();return false;">
<img src="images/ban_next.png" id="ban_nxt1"></a></div>

这部分也可以工作，但只有当我将“setTimeout”设置为“0”时才能正确。抱歉，我对此完全陌生。我正在查看这个stackoverflow.com问题，但我不知道如何在这里实现。

我先谢谢你了。

编辑： 旋转图像自动开始。它每 4 秒显示一张新图像。这些图像上有文字，或者更好的内幕笑话。读者应该很想阅读它们，但如果自动旋转引起注意力不集中，则必须保持这种注意力整整一分钟才能看到所有图像。那可能太长了所以我想实现一个按钮来覆盖计时器并“单击”时显示下一张图像。但单击后，旋转时间应恢复为自动旋转。这就是计划。

谢谢普鲁斯，现在是睡觉时间了，明天我会尽力掌握你的答案；）

Answer 1

您不需要 eval，只需执行 document.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0] 即可。

发生所描述的行为是因为有多个计时器触发。第一次调用 RotatingImage1ShowNext 时会设置一个，每次从 onclick 处理程序调用时都会设置多个。要解决此问题，请为您的计时器声明一个全局变量，并在设置另一个超时之前清除它（如果已设置）。喜欢：

var global_timerid;
function RotatingImage1ShowNext(){
  //RotatingImage1_Index = RotatingImage1_Index + 1;
  //if (RotatingImage1_Index > 14) RotatingImage1_Index = 0;
  RotatingImage1_Index = (RotatingImage1_Index + 1) % RotatingImage1_Images.length;
  //document.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0];
  document.getElementById('ban_img1').src = RotatingImage1_Images[RotatingImage1_Index][0];
  if (global_timerid) clearTimeout(global_timerid);
  global_timerid = setTimeout(RotatingImage1ShowNext, 4000);
}