Question

我问了一个问题How can I display an image in a div if is hovered over，感谢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/以使每个第二张图像在div中改变为1-> 2＆gt; 3-> 1＆gt; 2-> 3＆gt; 1 ...链接徘徊。如果三个链接中的一个悬停，则显示相应的图像。当它盘旋时它停止了。鼠标离开后，图像会再次在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);
  }
});

<强> DEMO

除非在链接上徘徊，否则如何每秒更改div中的图像？

1 个答案: