-2

質問をしました。ホバーした場合に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/を変更して、リンクがホバリングしました。3つのリンクのいずれかにカーソルを合わせると、対応する画像が表示されます。ホバーすると停止します。マウスが離れると、画像はdiv内で再び変化し始めます。

4

1 に答える 1

4

これが簡単な画像ローテーターです。リンクを介して停止し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);
  }
});

デモ。

于 2012-09-03T23:22:56.203 に答える