我正在测试响应式滑块上的一些新内容,并且在使用此插件时我被搁浅了:http://responsiveslides.com/
有人可以帮我解决如何为滑块创建启动/停止功能吗?我想要一个启动/停止选项,以控制滑块是否在幻灯片之间自动切换或暂停,为用户提供更多控制。
滑块中唯一可用的选项是悬停时启动/停止。当我点击DOM中的自定义元素时,我需要它来启动/停止。
答案 0 :(得分:2)
您需要在插件中添加一些代码。
首先,创建一个名为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/
你也会找到代码。 :)我希望这适合你。
答案 1 :(得分:1)
还有另一个简单的解决方案 - 在悬停时启用暂停,然后模拟悬停:
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>
答案 2 :(得分:0)
使用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
});
答案 3 :(得分:0)
基于@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;
});
});