微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在微妙滑块秀.js 中停止无限循环?

如何解决如何在微妙滑块秀.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 举报,一经查实,本站将立刻删除。