如何暂停悬停在滑块

Question

的js

var $slider = $('.slider'); 
var $slide = 'li'; 
var $transition_time = 1000; 
var $time_between_slides = 4000; 
function slides(){ 
    return $slider.find($slide); 

} 

slides().fadeOut(); 
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 (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 
); 

CSS

.slider { margin: 10px 0; width: 1024px; height: 500px; position: relative; overflow: hidden; } 
.slider li { display: none; position: absolute; top: 0; left: 0; } 

标记

<section id=""> 
    <div class="row"> 
     <div class="col-sm-12 col-md-12"> 
      <ul class="slider"> 
       <li> 
       <img src="images/highlights/foundation_transparent.png" alt="First slide"> 
       </li> 
       <li> 
       <img src="images/highlights/nps_timeline_transparent.png" alt="Second slide"> 
       </li> 
       <li> 
       <img src="images/highlights/nps_score_transparent.png" alt="Third slide"> 
       </li> 
       <li> 
       <img src="images/highlights/startup_bridge_india_pr.png" alt="fourth slide"> 
       </li> 
      </ul> 
     </div> 
    </div> 
</section> 

Answer 1

使用鼠标悬停和mouseout事件上的图像来实现这一点。

var $slider = $('.slider'); 
 
var $slide = 'li'; 
 
var $transition_time = 1000; 
 
var $time_between_slides = 4000; 
 
function slides(){ 
 
    return $slider.find($slide); 
 
} 
 

 
slides().fadeOut(); 
 
slides().first().addClass('active'); 
 
slides().first().fadeIn($transition_time); 
 

 
$function = 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'); 
 
    } 
 

 
$interval = setInterval($function, $transition_time + $time_between_slides); 
 

 
$("img").on("mouseover",function(){ 
 
clearInterval($interval); 
 
}); 
 

 
$("img").on("mouseout",function(){ 
 
    $interval = setInterval($function, $transition_time + $time_between_slides); 
 
}); 
 

 

.slider { margin: 10px 0; width: 1024px; height: 500px; position: relative; overflow: hidden; } .slider li { display: none; position: absolute; top: 0; left: 0; }

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<section id=""> 
 
    <div class="row"> 
 
     <div class="col-sm-12 col-md-12"> 
 
      <ul class="slider"> 
 
       <li> 
 
       <img src="images/highlights/foundation_transparent.png" alt="First slide"> 
 
       </li> 
 
       <li> 
 
       <img src="images/highlights/nps_timeline_transparent.png" alt="Second slide"> 
 
       </li> 
 
       <li> 
 
       <img src="images/highlights/nps_score_transparent.png" alt="Third slide"> 
 
       </li> 
 
       <li> 
 
       <img src="images/highlights/startup_bridge_india_pr.png" alt="fourth slide"> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</section>