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

Question

我问了一个问题，如果悬停在 div 上，我如何在 div 中显示图像，感谢 adeneo，这是一个解决方案（jsFiddle）：

标记：

<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>​

JavaScript：

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

如何修改http://jsfiddle.net/ScAVW/1/以便每秒图像更改为 1->2->3->1->2->3->1... 在 div 中，除非链接是徘徊。如果悬停三个链接之一，则显示相应的图像。它在悬停时停止。一旦你的鼠标离开，图像又开始在 div 中改变。

Answer 1

这是一个简单的图像旋转器。它将停在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);
  }
});

演示。