延迟滑块动画并将效果更改为淡入淡出

Delaying slider animation and change effect to fade?

本文关键字：淡入淡出动画延迟更新时间：2023-09-26

我正在使用一个非常简单的JS作为我的滑块，目前图像水平，左或右滑动，具体取决于您按下的箭头。我遇到的问题是动画没有延迟，所以如果你快速点击方向箭头几次，幻灯片需要一段时间才能赶上，并且有很多奇怪的重叠。

我想将动画

效果更改为淡入淡出并设置延迟，以便在当前幻灯片完成动画处理之前无法前进到下一张或上一张幻灯片。任何帮助将不胜感激！

var slideInProgress = false; 
var currentSlideIndex = 0,
slides;
function setTopSlider(){
  if (jQuery('#top_slider #container .slide').length != 0) {
    slides = jQuery('#top_slider #container > .slide');
    for(var i=0; i <= slides.length; i++){
      jQuery(slides[i]).css('left','100%');
    };
    jQuery(slides[currentSlideIndex]).css('left','0%');
    var el=jQuery('.dot:eq('+currentSlideIndex+')');
    src = el.css("background-image").replace("_off", "_over");
    el.css("background-image", src);
    el.addClass('active');
  };
};
function slide(dir) {
    var current, next, nextSlide;
    current = jQuery(slides[currentSlideIndex]);
    if(!isNaN(dir)){
        next = dir;
        if(next > currentSlideIndex )dir = 'left';
        else dir = 'right';
    };

      if(dir == 'left'){
        if(!next){
           next = currentSlideIndex + 1;
           if(next >= slides.length){
              next = 0;
           }
        }
if (slideInProgress) {
    return;
    }
    slideInProgress = true;
        nextSlide = jQuery(slides[next]);
        nextSlide.css('left','100%');
        nextSlide.css('z-index',parseInt(current.css('z-index'), 10)+1);
        nextSlide.animate({left: '0%'}, 1500);
        current.animate({left: '-100%'}, 1500);
      }else{
        console.log('moving right');
        if(!next){
             next = currentSlideIndex - 1;
            if(next < 0){
              next = slides.length-1;
            }
        }
        nextSlide = jQuery(slides[next]);
        nextSlide.css('left','-100%');
        nextSlide.css('z-index',parseInt(current.css('z-index'), 10)+1);
        nextSlide.animate({left: '0%'}, 1500);
        current.animate({left: '100%'}, 1500);
omplete: function(){
            slideInProgress = false;
            });
      };
    current.addClass('active');
    nextSlide.removeClass('active');

    var el=jQuery('.dot:eq('+currentSlideIndex+')');
    src = el.css("background-image").replace("_over", "_off");
    el.css("background-image", src);
    el.removeClass('active');

    el=jQuery('.dot:eq('+next+')');
    src = el.css("background-image").replace("_off", "_over");
    el.css("background-image", src);
    el.addClass('active');

    console.log('currentSlideIndex'+currentSlideIndex);
    console.log('next'+next);
    console.log('dir'+dir);
    currentSlideIndex = next;
};

我只会使用一些控制变量。

设置一些全局（布尔）变量，指示滑动正在进行中，并且不允许在上一个正在进行时进行另一次滑动。

更新

：我采用了您更新的代码，进行了一些更改，并使用//****//标记了我在您的代码中所做的更改。希望你能理解它：-）。（我没有测试代码，但它应该可以工作）。

// **** //
var slideInProgress = 0;
// **** //
var currentSlideIndex = 0,
        slides;
function setTopSlider() {
    if (jQuery('#top_slider #container .slide').length != 0) {
        slides = jQuery('#top_slider #container > .slide');
        for (var i = 0; i <= slides.length; i++) {
            jQuery(slides[i]).css('left', '100%');
        }
        ;
        jQuery(slides[currentSlideIndex]).css('left', '0%');
        var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
        src = el.css("background-image").replace("_off", "_over");
        el.css("background-image", src);
        el.addClass('active');
    }
    ;
}
;
function slide(dir) {
    // **** //
    if (slideInProgress != 0) {
        return;
    }
    slideInProgress = 3;
    // **** //
    var current, next, nextSlide;
    current = jQuery(slides[currentSlideIndex]);
    if (!isNaN(dir)) {
        next = dir;
        if (next > currentSlideIndex)
            dir = 'left';
        else
            dir = 'right';
    }
    ;
    if (dir == 'left') {
        if (!next) {
            next = currentSlideIndex + 1;
            if (next >= slides.length) {
                next = 0;
            }
        }
        nextSlide = jQuery(slides[next]);
        nextSlide.css('left', '100%');
        nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
        // **** //
        //nextSlide.animate({left: '0%'}, 1500);
        nextSlide.animate({
            left: '0%'
        }, {
            duration: 1500,
            complete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '-100%'}, 1500);
        current.animate({
            left: '-100%'
        }, {
            duration: 1500,
            complete: function() {
                slideInProgress--;
            }
        });
        // **** //
    } else {
        console.log('moving right');
        if (!next) {
            next = currentSlideIndex - 1;
            if (next < 0) {
                next = slides.length - 1;
            }
        }
        nextSlide = jQuery(slides[next]);
        nextSlide.css('left', '-100%');
        nextSlide.css('z-index', parseInt(current.css('z-index'), 10) + 1);
        // **** //
        //nextSlide.animate({left: '0%'}, 1500);
        nextSlide.animate({
            left: '0%'
        }, {
            duration: 1500,
            complete: function() {
                slideInProgress--;
            }
        });
        //current.animate({left: '100%'}, 1500);
        current.animate({
            left: '100%'
        }, {
            duration: 1500,
            complete: function() {
                slideInProgress--;
            }
        });
        // **** //
    }
    current.addClass('active');
    nextSlide.removeClass('active');
    var el = jQuery('.dot:eq(' + currentSlideIndex + ')');
    src = el.css("background-image").replace("_over", "_off");
    el.css("background-image", src);
    el.removeClass('active');
    el = jQuery('.dot:eq(' + next + ')');
    src = el.css("background-image").replace("_off", "_over");
    el.css("background-image", src);
    el.addClass('active');
    console.log('currentSlideIndex' + currentSlideIndex);
    console.log('next' + next);
    console.log('dir' + dir);
    currentSlideIndex = next;
    // **** //
    slideInProgress--;
    // **** //
}

在jQuery animate中，我使用了完整的回调函数，该函数在动画完成后将slideInPrgress设置为false。

或者，您可以设置另一个变量，指示有人在上一个动画进行时按下了箭头，并在上一个完成后执行该幻灯片。