Question

我想做这项工作并且可以打断。应该有1秒的淡入淡出，1秒的淡出，中间有3秒的延迟，但在3秒或1秒的淡入淡出/淡出过程中，可能会发生另一个应该发生的动作 - 停止前一个动作并且永远不会完成它。例如，在显示图像的3秒期间，用户想要转到下一个/下一个/下一个/下一个，所以立即动画应该停止并转到下一个/下一个/下一个/下一个（多个用户点击），而不会在此之前完成动画。

外部电话：SlideShow（1）;或SlideShow（-1）;等

function SlideShow(action) {
      slideCount = (slideCount+action) % totalSlides; 

      slides.eq(slideCount).fadeIn(fadeInAmount);

      // add 3 second delay/SetTimeout/etc here
      // how should setTimeout be involved here so that it, and the fadein/fadeout are stoppable (without ever continuing)

      slides.eq(slideCount).fadeOut(fadeOutAmount,function() {

      slideCount = (slideCount+increment) % totalSlides;
      SlideShow(0);
    });

  }

这是1s fadein，3s延迟，1s fadeout的起点

slides.eq(slideCount).fadeIn(fadeInAmount).delay(fadeDelay).addClass('jqImage').fadeOut(fadeOutAmount,function() {
      slideCount = (slideCount+increment) % totalSlides;
      SlideShow(0);
});

这是使用setTimeout的一次非工作尝试：

  function timerStop() {
        if (runningTimer) {
            clearTimeout(runningTimer);
            runningTimer = 0;
        }
  }


  var runningTimer;

  function SlideShow(action) {

    //    $('body').stop(); slides.eq(slideCount).dequeue(); slides.eq(slideCount).stop();


    slideCount=(slideCount+action) % totalSlides;

    $('#slideControls').html(
      (slideCount+1) + "/" + totalSlides
      + "<br>" + "Delay: " + fadeDelay/1000
      + "<br>" + "Skip: " + increment
    );

    $('#slideStatusbar').html( slides.eq(slideCount).find('img').attr('src').replace(/^.*[\\\/]/, '') ); // Filename only
    //slides.eq(slideCount).fadeIn(fadeInAmount).delay(fadeDelay).addClass('jqImage').fadeOut(fadeOutAmount,function() {
    //      slideCount < totalSlides-1 ? slideCount+=increment : slideCount=0;
    //  slideCount = (slideCount+increment) % totalSlides;
    //  SlideShow(0);


//    slides.eq(slideCount).addClass('jqImage');
    slides.eq(slideCount).fadeIn(fadeInAmount);


    runningTimer=setTimeout(function(){

      slides.eq(slideCount).fadeOut(fadeOutAmount,function() {
        slideCount = (slideCount + increment) % totalSlides;   //slideCount = (slideCount + (action ? action : increment)) % totalSlides; 
        SlideShow(0);
      });

    }, 1000);




  }

Answer 1

这不是一件容易的事。
花了几个小时修理。

您在服务器上为我制作的临时“沙箱”非常有用没有它我就无法解决问题 ;）

现在是你的功能：

  var slideCountAdjusted;
  var slideCount;
  function SlideShow(action) {

    //---------- read from sliders -----------
    slideCount = parseInt( $('#slider1').val()-1 );
    fadeDelay  = parseInt( $('#slider2').val() );
    step       = parseInt( $('#slider3').val() );
    //----------------------------------------

    slideCountAdjusted=(slideCount+action) % totalSlides;
    if(slideCount>=totalSlides && action>0){
        slideCountAdjusted=0;
    }
    if(slideCount==0 && action<0){
        slideCountAdjusted=totalSlides-1;
    }

    $('#slider1').val(slideCountAdjusted+1).change();

    $('#slideStatusbar').html( 
      jscript_slideshowLinks                                                        // California > 
      +     " > "
      +     slides.eq(slideCountAdjusted).find('img').attr('src').replace(/^.*[\\\/]/, '')        // filename
    ); // Filename only

    if(intervalEnabled){
      runningTimer=setTimeout(function(){
        slides.eq(slideCount).fadeOut(fadeOutAmount,function() {

          slideCount = (slideCount + step) % totalSlides;   //slideCount = (slideCount + (action ? action : increment)) % totalSlides; 
          $('#slider1').val(slideCount+1).change();

          SlideShow(0);
        });
      }, fadeDelay*1000);
    }

    if(showNow){
      slides.eq(slideCount).fadeOut(fadeOutAmount,function() {
        slides.eq(slideCountAdjusted).fadeIn(fadeInAmount);
      });
    }else{
      slides.eq(slideCountAdjusted).fadeIn(fadeInAmount);
    }
  }

我还更改了这些点击处理程序：

  $('#slideshowPlay').off("click").on("click", function (e){ mySliderPlay(); SlideShow(0); });
  $('#slideshowPause').off("click").on("click", function (e){ mySliderPause();  });

  $('#slideshowPrevious').click(function (e) { mySliderBack(); });
  $('#slideshowNext').click(function (e)     { mySliderForward(); });

以下是那些处理程序：

  var intervalEnabled=true;
  var showNow=false;

  //---------------------------------------------------------------------
  // slideshowTimer routines - start
  //---------------------------------------------------------------------
  function mySliderPause() {
    console.log("PAUSE button pressed;");
    intervalEnabled=false;
    clearTimeout(runningTimer);
  }
  function mySliderPlay() {
    console.log("PLAY button pressed;");
    intervalEnabled=true;
    showNow=false;
  }
  function mySliderBack() {
    console.log("BACK button pressed;");
    intervalEnabled=false;
    showNow=true;
    clearTimeout(runningTimer);
    SlideShow(-1);

  }
  function mySliderForward() {
    console.log("FORWARD button pressed;");
    intervalEnabled=false;
    showNow=true;
    clearTimeout(runningTimer);
    SlideShow(1);
  }

您的index.html中的更多更改...

我注释掉了这些脚本调用，我甚至都不知道它们应该做什么...
但是，自从我删除它们之后，你的页面加载速度更快 AND 这种奇怪的间隔行为让我感到神奇地消失了。

<!--script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script>
<script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script>
<script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script-->

我还注释了这个jQuery lib调用：

<!--script src='/ans/jquery/jquery-1.11.0.min.js'></script-->

因为你也叫这个。所以我把它移动了几行。

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

jQuery淡入/淡出和延迟，取消之前的动画

1 个答案: