javascript - 如何启动/停止 ResponsiveSlides.js？

Question

我正在响应式 slider 上测试一些新东西，在使用这个插件时我陷入了困境:http://responsiveslides.com/

任何人都可以帮助我如何为 slider 创建开始/停止功能吗？我想要一个开始/停止选项，以控制 slider 是否自动在幻灯片之间切换或暂停，给用户更多的控制权。

slider 中唯一可用的选项是悬停时启动/停止。当我单击 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 避免在悬停 slider 后重新启动 slider 。

我知道这不是最好的解决方案，但它确实有效。

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

您还将找到代码。 :) 我希望这对你有用。