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元素才能完成他的工作。 forcePause避免在将鼠标悬停后重新启动滑块。

我知道它不是最好的解决方案，但它可以解决问题。

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

你也会找到代码。 :)我希望这适合你。

Answer 2

还有另一个简单的解决方案 - 在悬停时启用暂停，然后模拟悬停：

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>

Answer 3

使用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 4

基于@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;
    });    
});

如何启动/停止ResponsiveSlides.js？

4 个答案: