Добавить функцию приостановки в слайдер

Question

У меня есть очень хороший скрипт слайдера здесь и уже понял, чтобы получить под ним пули, но я просто хочу знать .. возможно ли добавить к нему несколько простых строк, чтобы изображение приостанавливалось/в режиме ожидания при наведении мыши?

Вот мой код прямо сейчас:

JQuery

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 

     $("#slideshow div:gt(0)").hide(); 

     var index; 
     index = 0; 
     var totalslides; 
     totalslides = 2; 

     var nextSlide = function() { 
      $('#slideshow div').eq(index).fadeOut(1000); 
      $('#nav' + index).toggleClass('navselected'); 
      index++; 
      if (index > totalslides - 1) { index = 0; } 
      $('#slideshow div').eq(index).fadeIn(3000); 
      $('#nav' + index).toggleClass('navselected'); 
     } 

    var nextSlideTimer = setInterval(nextSlide, 7000); 

     function nav(selectedSlide) { 
      clearInterval(nextSlideTimer); 

      $('#slideshow div').eq(index).fadeOut(1000); 
      $('#nav' + index).toggleClass('navselected'); 
      index = selectedSlide; 
      $('#slideshow div').eq(index).fadeIn(1000); 
      $('#nav' + index).toggleClass('navselected'); 

      nextSlideTimer = setInterval(nextSlide, 4000); 
     } 

     $("#nav0").click(function() { nav(0); }); 
     $("#nav1").click(function() { nav(1); }); 
    }); 



</script> 

CSS

<style> 
#slideshow { position: relative; width: 960px; height: 300px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);} 
#slideshow div { position: absolute; top: 10px ; left: 10px; right: 10px; bottom: 10px; } 
#slideshow a {display: block;width:960px;height:300px; }  
#slideshow a:hover{background-position: center bottom;} 

#slideshownav a.navselected{color:#eb910c;} 
#slideshownav {text-align:center; padding-top:8px;padding-bottom:20px;} 
#slideshownav a {padding-right:10px;color:#748090;font-size:50px; text-decoration: none; } 
#slideshownav a:hover {cursor:pointer;} 
</style> 

HTML

<div id="slideshow"> 
    <div>IMAGE 1</div> 
    <div>IMAGE 2</div> 
</div> 
<div id="slideshownav"> 
    <a id="nav0" class="navselected">&#176;</a> 
    <a id="nav1">&#176;</a> 
</div> 

Answer 1

Вы можете использовать mouseover и mouseout:

$('#slideshow').mouseover(function() { 
    // Clear the interval. 
    clearInterval(nextSlideTimer); 
}).mouseout(function() { 
    // Start it nextSlide again. 
    nextSlideTimer = setInterval(nextSlide, 3000); 
}); 

Или лучше, вы можете использовать mouseenter и mouseleave (см JQuery docs для демонстрации):

$('#slideshow').mouseenter(function() { 
    // Clear the interval. 
    clearInterval(nextSlideTimer); 
}).mouseleave(function() { 
    // Start it nextSlide again. 
    nextSlideTimer = setInterval(nextSlide, 3000); 
}); 

Секция ond лучше, потому что он не запускает много событий, когда вы перемещаете внутренние элементы родительского ползунка.

Answer 2

Добавить это внутри готовой функции документа, в нижней части:

$('#slideshow').on('mouseover mouseleave', function(event) { 
    if (event.type === 'mouseover') { 
    // stop slideshow timer 
    clearInterval(nextSlideTimer); 
    } else { 
    // add a shorter time delay 
    nextSlideTimer = setInterval(nextSlide, 4000); 
    } 
});