如何解决如何在微妙滑块秀.js 中停止无限循环?
如何停止以下 Ken-Burns-Slider 脚本的无限循环?我有 3 张图片,我想在第三张图片的动画后停止滑块。尝试使用 slideRefresh 的 stop() 不起作用(或者我的编码很糟糕)。 脚本的完整代码可以在 GitHub 上看到。感谢您的帮助。
(function($){
$.fn.slideshow = function(options){
var slides = $(this);
var settings = $.extend({
randomize: true,slideDuration: 6000,fadeDuration: 1000,animate: true,slideElementClass: 'slide',slideshowId: 'slideshow'
},options);
}
$('<div id="' + settings.slideshowId + '"></div>').insertBefore(slides);
var slideshow = $('#' + settings.slideshowId);
var slidetimedelta = 0;
var resumeStartTime = 0;
var resumeTimer;
if(settings.animate == true){
var cssAnimationDuration = settings.slideDuration + settings.fadeDuration;
}else{
slides.find('.' + settings.slideElementClass + ' span.animate').removeClass('animate');
var cssAnimationDuration = 0;
}
console.log('Slideshow initialized.');
slides.find('.' + settings.slideElementClass + ':first span.animate').addClass('active').css('animation-duration',cssAnimationDuration + 'ms')
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
var currentSlideStartTime = Date.Now();
// Start interval loop
slidesInterval = setInterval(slideRefresh,settings.slideDuration);
console.log('Slideshow started.');
if(settings.pauSEOnTabBlur == true){
$(window).focus(function() {
console.log('Window gained focus.');
if (paused == true) {
console.log('Resuming slideshow.');
resumeStartTime = Date.Now();
paused = false;
$('#' + settings.slideshowId + ' span.active:last').removeClass('paused');
resumeTimer = setTimeout(function(){
slidetimedelta = 0;
slideRefresh();
slidesInterval = setInterval(slideRefresh,settings.slideDuration);
},settings.slideDuration - slidetimedelta);
}
}).blur(function() {
paused = true;
console.log('Window lost focus,slideshow paused.');
if(slidetimedelta != 0){
var timeSinceLastPause = Date.Now() - resumeStartTime;
slidetimedelta = slidetimedelta + timeSinceLastPause;
console.log('Time since last pause within this slide: ' + timeSinceLastPause + ' ms');
}else{
slidetimedelta = Date.Now() - currentSlideStartTime;
}
console.log('Current slide at ' + slidetimedelta + ' ms.');
$('#' + settings.slideshowId + ' span.active:first').addClass('paused');
clearInterval(slidesInterval);
clearTimeout(resumeTimer);
});
}
function slideRefresh() {
console.log('Slide refresh triggered.');
currentSlideStartTime = Date.Now();
var slideshowDOM = slideshow[0];
if(slideshowDOM.children.length == 0) {
console.log('There are no slides in the slideshow.');
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
}else{
slides.find('.' + settings.slideElementClass + ':first').prependTo(slideshow);
var slideElement = '#' + settings.slideshowId + ' .' + settings.slideElementClass;
$(slideElement + ':first span.animate').addClass('active').css('animation-duration',cssAnimationDuration + 'ms');
$(slideElement + ':last').fadeOut(settings.fadeDuration,function(){
$(slideElement + ':last span.animate').removeClass('active').css('animation-duration','0ms');
$(slideElement + ':last').appendTo(slides);
slides.find('.' + settings.slideElementClass).show(0);
});
}
}
};
}( jQuery ));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。