2015-12-08 117 views
1

我有一個非常好的滑塊腳本在這裏,並已經想出了它下面的子彈,但我只想知道..是否有可能添加一些簡單的線條,使圖像暫停/保持在鼠標懸停?添加暫停功能滑塊

這裏是我現在的代碼:

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> 

回答

0

您可以使用mouseovermouseout

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

或者更好的,你可以使用mouseentermouseleave(見的jQuery演示文稿):

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

The sec ond方法更好,因爲當你移動父滑塊的內部元素時,它不會引發太多事件。

+0

感謝兄弟,但正如我剛剛回復Mottie .. jQuery是打擊和希望我。在哪裏放置這個,就在最後}}; ? – Jorus

+0

最後一個好友......在最後一個'});'之前添加它。 –

+0

謝謝兄弟!標記爲有幫助。 – Jorus

0

添加此文件準備功能的內側靠近底部:

$('#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); 
    } 
}); 
+0

對不起,jQuery對我來說是命中註定的。我必須把它放在最後**}); **? – Jorus

+0

是的,在$(「#nav1」)下面,單擊(function(){nav(1);});'並且在'});之上''很好。 – Mottie

+0

謝謝。我不知道爲什麼,但你的工作,無論如何謝謝。除了Praveen的上述內容之外,它並不重要。所以我一直在幫忙。謝謝 – Jorus