Slider懸停

Question

我有一個滑動條，但我試圖讓滑塊繼續當鼠標離開<li>圖像。

當鼠標使用.hover()方法輸入時，它會停止 - 但是一旦鼠標移出圖像，它就不會繼續。

任何幫助將不勝感激。

jQuery(function ($) { 
     // settings 
     var $slider = $('.home-slider'); // class or id of carousel slider 
     var $slide = 'li'; // could also use 'img' if you're not using a ul 
     var $transition_time = 1000; // 1 second 
     var $time_between_slides = 5000; // 5 seconds 

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

     slides().fadeOut(); 

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

     // 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); 

     $('.home-slider').hover(function() { 
      $interval = clearInterval($interval); 
     }, function() { 
      interval = setInterval($transition_time, $time_between_slides); 
     }); 

     $('home-slider').mouseout(function() { 
      slides().fadeOut(); 
     }); 
    }); 

Answer 1

我重構了您的代碼以正常工作。

我所做的是將設置和個人功能移到jQuery(function($) { ... });之外。我修改了第一個setInterval以使用sliderInterval函數以及hover事件來使用此相同的函數。

我也刪除了mouseout事件處理程序，因爲我不認爲這是必要的。

代碼現在應該工作如下：

1. 通過在頁面加載元素自動滑入
2. 滑動停止時幻燈片的一個懸停
3. 滑動繼續，一旦鼠標離開幻燈片。

Example JSFiddle

代碼：

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

    jQuery(function ($) { 
     slides().fadeOut(); 

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

     // auto scroll 
     $interval = setInterval(sliderInterval, $transition_time + $time_between_slides); 

     $('.home-slider').hover(function() { 
      $interval = clearInterval($interval); 
     }, function() { 
      $interval = setInterval(sliderInterval, $time_between_slides); 
     }); 
    }); 

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

    function sliderInterval() { 
     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'); 
    }