如何启动/停止ResponsiveSlides.js？
我正在测试响应式滑块上的一些新东西，我在使用这个插件时陷入困境： http ： //responsiveslides.com/
任何人都可以帮助我如何为滑块创建启动/停止function？ 我想要一个启动/停止选项，以控制滑块是否在幻灯片之间自动切换或暂停，从而为用户提供更多控制。
滑块中唯一可用的选项是在hover时启动/停止。 当我点击DOM中的自定义元素时，我需要它来启动/停止。
你需要在插件中添加一些代码。
首先，创建一个名为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避免在hover后重新启动de slider。
我知道这不是最好的解决方案，但它可以解决问题。
你可以在这里看到它： http ： //jsbin.com/eHaHEVuN/1/
你也会找到代码。 :)我希望这适合你。
还有另一个简单的解决方案 – 在hover时启用暂停，然后模拟hover：
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：
Pause Play
使用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 });
基于@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; }); });