停止自動播放關於滑塊的點擊回合javascript

我已經從此site使用了有關滑塊的四處滾動。停止自動播放關於滑塊的點擊回合javascript

如果我將鼠標懸停在幻燈片上，自動旋轉停止。我需要stop的auto playon click鏈接Stop auto play。

我的html代碼：

<div id="carousel"> 
    <a href="#"><img src="image_main1.jpg" alt=""></a> 
    <a href="#" ><img src="image_main2.jpg" alt=""></a> 
    <a href="#" ><img src="image_main3.jpg" alt=""></a> 
</div> 

<div id="carousel-controls"> 
    <span class="control current"><img src="video_thumb1.jpg" alt=""></span> 
    <span class="control"><img src="video_thumb.jpg2" alt=""></span> 
    <span class="control"><img src="video_thumb.jpg3" alt=""></span> 
</div> 
<div><a href="#">Stop auto play</a></div>

我的腳本：

(function($) { 

var $descriptions = $('#carousel-descriptions').children('li'), 
    $controls = $('#carousel-controls').find('span'), 
    $carousel = $('#carousel') 
     .roundabout({childSelector:"a", minOpacity:1, autoplay:true, autoplayDuration:5000, autoplayPauseOnHover:true }) 
     .on('focus', 'a', function() { 
      var slideNum = $carousel.roundabout("getChildInFocus"); 

      $descriptions.add($controls).removeClass('current'); 
      $($descriptions.get(slideNum)).addClass('current'); 
      $($controls.get(slideNum)).addClass('current'); 

     }); 


$controls.on('click dblclick', function() { 
    var slideNum = -1, 
     i = 0, len = $controls.length; 

    for (; i<len; i++) { 
     if (this === $controls.get(i)) { 
      slideNum = i; 
      break; 
     } 
    } 

    if (slideNum >= 0) { 
     $controls.removeClass('current'); 
     $(this).addClass('current'); 
     $carousel.roundabout('animateToChild', slideNum); 
    } 
}); 

}(jQuery));

如何做到這一點？

來源

2012-11-29 Sam Hanson

從API頁（http://fredhq.com/projects/roundabout#/api），btnStopAutoplay布爾值停止自動播放是「頁面元素的jQuery選擇，點擊後，會停止迴旋的自動播放功能（如果它是當前播放）。」

因此，首先添加一個ID，因此可以選擇

<div><a href="#" id="carouselstop">Stop auto play</a></div>

然後更新您的Javascript功能來包括btnStopAutoplay：

.roundabout({childSelector:"a", minOpacity:1, autoplay:true, autoplayDuration:5000, autoplayPauseOnHover:true, btnStopAutoplay:"#carouselstop" })

來源

2012-11-29 11:40:21 slowe

它的工作。非常感謝。 –

還有一個幫助。點擊滑塊主中心圖像，我可以停止自動播放嗎？ –

也許吧。它看起來好像主要的中心圖像有'環繞焦點'類。所以你可以附加一個函數到click事件。也許是沿$'（document）.on（'click'，'img.roundabout-in-focus'，function（e）{$ carousel.roundabout（「stopAutoplay」）}）'行的東西。 – slowe

您可以通過設置假

<div><a href="#" onclick='$('#carousel').roundabout({autoplay: false});'>Stop auto play</a></div>

See this link for reference

來源

2012-11-29 11:32:07 Dineshkani

停止自動播放關於滑塊的點擊回合javascript

回答

相關問題