Javascript 除非将鼠标悬停在链接上，否则如何每秒更改一个div内的图像？

我问了一个问题，感谢adeneo，这里有一个解决方案（）：

标记：

<div id="imgs">
    <img src="http://www.flash-slideshow-maker.com/images/help_clip_image020.jpg" alt="image 1">
    <img src="http://www.nasa.gov/images/content/297522main_image_1244_946-710.jpg" alt="image 2">
    <img src="http://www.dreamincode.net/forums/uploads/monthly_05_2010/post-380028-12747928967239.jpg" alt="image 3">
</div>

<ul id="my-ul">
    <li><a href="#" class="img1">hover to see image1</a></li>
    <li><a href="#" class="img2">hover to see image2</a></li>
    <li><a href="#" class="img3">hover to see image3</a></li>
</ul>​

$('#my-ul a').on('mouseenter mouseleave', function(e) {
    $('#imgs img').eq($(this).parent('li').index()).toggle(e.type==='mouseenter');
});

---

如何修改，使每秒钟的图像更改为1->2->3->1->2->3->1。。。在div中，除非链接悬停。如果悬停三个链接之一，将显示相应的图像。它在悬停时停止。一旦鼠标离开，div中的图像将再次发生变化。

这里有一个简单的图像旋转器。它将在链接上的

mouseenter

上停止，切换到悬停的图像；它将从当前可见的图像在mouseleave上恢复

var intervalId = setInterval(rotate, 1000); // rotate every 1s

function rotate() {
  var $imgs = $("#imgs img"),
      $visible = $imgs.filter(":visible").hide().index();
  $imgs.eq(($visible + 1) % $imgs.length).show();  
}

$('#my-ul a').on('mouseenter mouseleave', function(e) {
  var $imgs = $('#imgs img');
  if (e.type === 'mouseenter') {
    clearInterval(intervalId); // stop, hammer time
    $imgs.filter(":visible").hide();
    $imgs.eq($(this).parent('li').index()).show();
  } else {
    intervalId = setInterval(rotate, 1000);
  }
});

---

什么原因否决了我的问题？谢谢，但悬停时不会停止旋转。