添加暂停功能滑块

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演示文稿）：

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

The sec 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); 
    } 
});