javascript - 我已经将这个简单的脚本组合在一起来旋转图片并将它们链接到指定的 URL，当我将鼠标悬停在图片上时如何让它暂停？

Question

    <a id="imageurl" name="imageurl"><img src="Rotating1" id="Rotating1" border="0" alt="Rotating1" name="Rotating1" /></a>
<script language="javascript" type="text/javascript">

   function RotateImages(Start)
  {
      var a = new Array("1.jpg","2.jpg","3.jpg", "4.jpg");
      var c = new Array("url1", "url2", "url3", "url4");
      var b = document.getElementById('Rotating1');
      var d = document.getElementById('imageurl');
      if(Start>=a.length)
          Start=0;
      b.src = a[Start];
      d.href = c[Start];
      window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
  }

  RotateImages(0);

  </script>

Answer 1

如下更改代码:

<a id="imageurl" name="imageurl"><img src="Rotating1" id="Rotating1" border="0" alt="Rotating1" name="Rotating1" onmouseover="StopRotation();" onmouseout="RotateImages();"/></a>
<script language="javascript" type="text/javascript">

  var currentImage = -1;
  function RotateImages()
  {
    var a = new Array("1.jpg","2.jpg","3.jpg", "4.jpg");
    var c = new Array("url1", "url2", "url3", "url4");
    var b = document.getElementById('Rotating1');
    var d = document.getElementById('imageurl');

    currentImage++;

    if(currentImage>= a.length)
      currentImage=0;

    b.src = a[currentImage];
    d.href = c[currentImage];

    rotator = window.setTimeout("RotateImages(" + (currentImage+1) + ")",3000);
  }

  function StopRotation()
  {
    window.clearTimeout(rotator);
  }

  RotateImages();

</script>

• 添加函数“StopRotation”
• 添加了 onmouseover 和 onmouseout 事件到图像标签
• 在当前图像处继续旋转。