如何啓動/停止ResponsiveSlides.js？

Question

我對響應滑塊測試一些新的東西，和我在使用這個插件的東西擱淺：http://responsiveslides.com/

誰能幫助我如何創建一個啓動/滑塊停止功能？我想有一個開始/停止選項，來控制滑塊是自動在幻燈片之間切換還是暫停，給用戶更多的控制權。

滑塊中唯一可用的選項是啓動/停止懸停。我需要它在DOM中單擊一個自定義元素時開始/停止。

Answer 1

你將需要添加一些代碼的插件。

首先，創建一個名爲forcePause變量：

fadeTime = parseFloat(settings.speed), 
    waitTime = parseFloat(settings.timeout), 
    maxw = parseFloat(settings.maxwidth), 
    forcePause = false, // <---- here! 

在restartCycle方法，你需要檢查是否暫停強制與否：

restartCycle = function() { 
     if (settings.auto) { 
     // Stop 
     clearInterval(rotate); 
     if (!forcePause) // new line 
      // Restart 
      startCycle(); 
     } 
    }; 

之後，你可以像添加的東西在行300中：

$('.pause_slider').click(function(e){ 
     e.preventDefault(); 
     forcePause = true; 
     $(this).hide() 
     $('.play_slider').show(); 
     clearInterval(rotate); 
    }); 

    $('.play_slider').click(function(e) { 
     e.preventDefault(); 
     forcePause = false; 
     $(this).hide(); 
     $('.pause_slider').show(); 
     restartCycle(); 
    }); 

您將需要兩個HTML元素與每個類到d他的工作。將鼠標懸停後，forcePause可避免重新啓動滑塊。

我知道這不是有史以來最好的解決方案，但它有訣竅。

你可以看到它在這裏工作： http://jsbin.com/eHaHEVuN/1/

而且你會發現代碼。 :)我希望這對你有用。

Answer 2

控制起動/停止與pause參數：

$(".rslides").responsiveSlides({ 
     auto: true,    // Boolean: Animate automatically, true or false 
     speed: 500,   // Integer: Speed of the transition, in milliseconds 
     timeout: 4000,   // Integer: Time between slide transitions, in milliseconds 
     pager: false,   // Boolean: Show pager, true or false 
     nav: false,    // Boolean: Show navigation, true or false 
     random: false,   // Boolean: Randomize the order of the slides, true or false 
     pause: true,   // Boolean: Pause on hover, true or false 
     pauseControls: true, // Boolean: Pause when hovering controls, true or false 
     prevText: "Previous", // String: Text for the "previous" button 
     nextText: "Next",  // String: Text for the "next" button 
     maxwidth: "",   // Integer: Max-width of the slideshow, in pixels 
     navContainer: "",  // Selector: Where controls should be appended to, default is after the 'ul' 
     manualControls: "",  // Selector: Declare custom pager navigation 
     namespace: "rslides", // String: Change the default namespace used 
     before: function(){}, // Function: Before callback 
     after: function(){}  // Function: After callback 
    }); 

Answer 3

以@miduga的答案爲基礎，爲解決方案量身打造，讓外部事件暫停幻燈片放映。

我最終創建了一個window.responsiveSlidesForcePause的全局變量，用於旋轉時間間隔以確定是否應該發生旋轉。 理想情況下，應該有一個暫停單個幻燈片放映的公開方法，但這是一種快速入侵，可以暫停頁面上的任何幻燈片放映。我的情況只需要在壽命較短的頁面上進行單個幻燈片放映。

http://jsfiddle.net/egeis/wt6ycgL0/

初始化的全局變量：

return this.each(function() { 

    // Index for namespacing 
    i++; 

    window.responsiveSlidesForcePause = false; // new global variable 

    var $this = $(this), 

使用全局變量：

startCycle = function() { 
    rotate = setInterval(function() { 
     if (!window.responsiveSlidesForcePause) { // new if statement 

      // Clear the event queue 
      $slide.stop(true, true); 

      var idx = index + 1 < length ? index + 1 : 0; 

      // Remove active state and set new if pager is set 
      if (settings.pager || settings.manualControls) { 
       selectTab(idx); 
      } 

      slideTo(idx); 
     } 
    }, waitTime); 
}; 

其允許暫停播放幻燈片是實際的插件外的事情。

$(document).ready(function() { 
    $("#slider").responsiveSlides({ nav: true, prevText: '', nextText: '' }); 
    $(".pause_slider").on("click", function (e) { 
     e.preventDefault(); 
     $(this).hide(); 
     $('.play_slider').show(); 
     window.responsiveSlidesForcePause = true; 
    }); 
    $('.play_slider').click(function(e) { 
     e.preventDefault(); 
     $(this).hide(); 
     $('.pause_slider').show(); 
     window.responsiveSlidesForcePause = false; 
    });  
}); 

Answer 4

還有一個簡單的解決方案 - 能夠懸停暫停，隨後模仿懸停：

JS：

$(".rslides").responsiveSlides({ 
    pause: true 
}); 

$('.carousel-pause .pause').click(function(e){ 
    $(this).hide(); 
    $('.play').show(); 
    $('.rslides').trigger('mouseenter'); 
}); 

$('.carousel-pause .play').click(function(e){ 
    $(this).hide(); 
    $('.pause').show(); 
    $('.rslides').trigger('mouseleave'); 
}); 

HTML：

<div class="carousel-pause"> 
    <span class="pause">Pause</span> 
    <span class="play">Play</span> 
</div>