Question

我有一个有效的图片幻灯片，但我需要这样做，以便当你用鼠标滑过时，幻灯片停在特定的图像，然后当你发布时，再次开始幻灯片放映..这是我的功能：

$(function(){
$(this).mouseover(function(){
    $(this).toggle();
});
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein1 :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein1');}, 
  3000);
  });

有人可以帮忙吗？现在真的很讨厌我。

Answer 1

您需要更改幻灯片功能以更好地跟踪图像，这样的事情应该有效：

$(function(){
    var timer, elm=0, images = $('img', '.fadein1');
    images.not(':first').hide().end().on({
         mouseenter: function() {
             clearInterval(timer);
         },
         mouseleave: function() {
             timer = setInterval(slider, 3000);
         }
   });

   timer = setInterval(slider, 3000);

   function slider() {
     var image = images.eq(elm);
     image.fadeOut();
     elm = elm!=images.length-1 ? image.next('img').index() : 0;
     images.eq(elm).fadeIn();
   }
 });

FIDDLE

Answer 2

试试这个......

var interval;

function slide(){
    interval = setInterval(function(){
      $('.fadein1 :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein1');}, 
      3000);
  });

  $(function(){

    $('.fadein1').hover(function(){
        clearInterval(interval);
    },function(){
      slide();
    });

    $('.fadein img:gt(0)').hide();
    slide();

  }

Answer 3

你通常只是设置一个信号量来表示“嘿，我已暂停”你想这样做。然后，在你的setInterval函数中，你说if（paused）{return;}并且只有在没有暂停的情况下才会继续。

将鼠标悬停在暂停图像幻灯片上

3 个答案: