javascript - jQuery galleryview 在鼠标移开时开始自动播放

Question

我目前正在使用 GalleryView 插件 ( http://spaceforaname.com/galleryview/ ) 开发一个网站。一切都很好，除了没有“鼠标移开时开始自动播放”选项(相当于悬停时停止)，所以我正在尝试自己实现一个。当我查看 JavaScript 代码时，我可以看到有一个“showNext”方法，我想在用户将鼠标悬停在图库上一段时间后调用该方法。这是我正在使用的代码的简短版本(不起作用):

$j(function(){
 sliderr = $j('#productGallery').galleryView({
    transition_speed: 600,
    autoplay: false 
    });

});

$j('.gallery-wrapper').mouseout(function(){

    if (timer == null) {
       timer = setInterval( function(){
          if (counter > 5000) {
             sliderr.galleryView("showNext");
             counter = 0;
          } else
             counter += 1000;
       }, 1000);
    } 
});

有人知道这段代码有什么问题吗？

Answer 1

通过查看他们的演示，我怀疑有更好的方法来做到这一点。在演示中，他们有一个暂停/播放按钮，可以使用 startSlideshow() 和 stopSlideShow() 函数。我怀疑您会想要使用该函数，因此您会想要使用 setTimeout() 调用而不是 setInterval()。像这样的事情:

$j('.gallery-wrapper').mouseout(function(){
    timer = setTimeout( function(){
          //note: I'm not sure this is a function of the galleryView object
          //      it might be off of another part of the overall structure
          //      like sliderr.startSlideshow() or something.
          sliderr.galleryView.startSlideshow(); 
    }, 5000); 
});

您可能需要相应的鼠标悬停来清除超时:

$j('.gallery-wrapper').mouseover(function(){
    clearTimeout(timer);
});