当鼠标不悬停时重新启动图像库 [英] restart image gallery when mouse is not hovering

问题描述

当鼠标悬停在图库上时，如何重新启动图片库？我知道我很近;但是，我不能弄清楚。我在github修改了此 Simple-jQuery-Carousel-Slider @paulmason。

js代码：

  b 
 $ b // settings 
 var $ slider = $（'。slider'）; //旋转木马滑块的类或ID 
 var $ slide ='img'; //也可以如果你不使用ul 
 var $ transition_time = 1000; // 1秒
 var $ time_between_slides = 4300; // 4秒
 
函数幻灯片使用'img' （）{
 return $ slider.find（$ slide）; 
} 
 
 slides（）。fadeOut（）; 
 
 //设置活动class 
 slides（）。first（）。addClass（'active'）; 
 slides（）。first（）。fadeIn（$ transition_time）; 
 
 // 
 $ interval = setInterval（
 function（）{
 var $ i = $ slider.find（$ slide +'.active'）。index（）; 
 
 slides（）。eq（$ i）.removeClass（'active'）; 
 slides（）。eq（$ i）.fadeOut（$ transition_time）; 
 
 if ）.length == $ i + 1）$ i = -1; //循环开始
 
幻灯片（）。eq（$ i + 1）.fadeIn（$ transition_time）; 
 slides（）。eq（$ i + 1）.addClass（'active'）; 
} 
，$ transition_time + $ time_between_slides 
）; 
 function pauseLoop（）{
 window.clearInterval（$ interval）; 
} 
 
 $（。slider）。hover（
 function（）{
 // alert（pause）; 
 pauseLoop ）; //暂停循环|工作
}，
 function（）{
 // alert（unpause）; 
 $ interval;问题
} 
）; 
}）; 
  

html很简单。

nofollow> http://jsfiddle.net/xDf4Z/10

解决方案

，声明间隔变量，将函数返回到外部并将悬停设置为新建的函数。

  jQuery（function（$）{
 
 // settings 
 var $ slider = $（'。slider'）; //旋转木马滑块的类或id 
 var $ slide ='img'; //如果不使用ul也可以使用'img' transition_time = 1000; // 1秒
 var $ time_between_slides = 4300; // 4秒
 var $ interval; 
 
函数幻灯片（）{
 return $ slider .find（$ slide）; 
} 
 
 slides（）。fadeOut（）; 
 
 //设置活动类
 slides （）.addClass（'active'）; 
 slides（）。first（）。fadeIn（$ transition_time）; 
 
 //自动滚动
 function startloop b $ b $ interval = setInterval（
 
 function（）{
 var $ i = $ slider.find（$ slide +'.active'）。index（）; 
 
 slides（）。eq（$ i）.removeClass（'active'）; 
 slides（）。eq（$ i）.fadeOut（$ transition_time）; 
 
 （slides（）。length == $ i + 1）$ i = -1; //循环开始
 
幻灯片（）eq（$ i + 1）.fadeIn（$ transition_time）; 
 slides（）。eq（$ i + 1）.addClass（'active'）; 
}，$ transition_time + $ time_between_slides）; 
} 
 function pauseLoop（）{
 window.clearInterval（$ interval）; 
} 
 
 $（。slider）。hover（
 
 function（）{
 // alert（pause）; 
 pauseLoop（）; //暂停循环
}，
 
 function（）{
 // alert（unpause）; 
 startloop // scroll（）
}）; 
 return startloop（）; 
}）; 
  

http://jsfiddle.net/xDf4Z/19/

How can I restart image gallery when mouse is not hovering over the gallery? I know I'm close; but, I cannot figure out. I adapted this Simple-jQuery-Carousel-Slider of @paulmason at github.

js code:

jQuery(function ($) {

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'img'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4300; // 4 seconds

function slides() {
    return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
    $interval = setInterval(
      function () {
          var $i = $slider.find($slide + '.active').index();

          slides().eq($i).removeClass('active');
          slides().eq($i).fadeOut($transition_time);

          if (slides().length == $i + 1) $i = -1; // loop to start

          slides().eq($i + 1).fadeIn($transition_time);
          slides().eq($i + 1).addClass('active');
      }
      , $transition_time + $time_between_slides
    );
function pauseLoop() {
        window.clearInterval($interval);
    }

$(".slider").hover(
    function () {
        //alert("pause");
        pauseLoop(); // pause the loop  | works 
    },
    function () {
        //alert("unpause");
        $interval; //scroll()  here is the problem 
    }
);
});

The html is simple. Just a div with images.

edit jsfiddle: http://jsfiddle.net/xDf4Z/10

解决方案

Wrap the interval in a function, declare the interval variable, return the function to the outside and set the hover off to the newly built function.

jQuery(function ($) {

    // settings
    var $slider = $('.slider'); // class or id of carousel slider
    var $slide = 'img'; // could also use 'img' if you're not using a ul
    var $transition_time = 1000; // 1 second
    var $time_between_slides = 4300; // 4 seconds
    var $interval;

    function slides() {
        return $slider.find($slide);
    }

    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    // auto scroll 
    function startloop(){
    $interval = setInterval(

    function () {
        var $i = $slider.find($slide + '.active').index();

        slides().eq($i).removeClass('active');
        slides().eq($i).fadeOut($transition_time);

        if (slides().length == $i + 1) $i = -1; // loop to start

        slides().eq($i + 1).fadeIn($transition_time);
        slides().eq($i + 1).addClass('active');
    }, $transition_time + $time_between_slides);
}
    function pauseLoop() {
        window.clearInterval($interval);
    }

    $(".slider").hover(

    function () {
        //alert("pause");
        pauseLoop(); // pause the loop
    },

    function () {
        //alert("unpause");
          startloop(); //scroll()
    });
    return startloop();
});

http://jsfiddle.net/xDf4Z/19/

这篇关于当鼠标不悬停时重新启动图像库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！