Question

我在滑块上使用了一个非常简单的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;
};

Answer 1

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

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

更新：我使用了更新的代码，进行了一些更改，并在代码中使用// **** //标记了更改。希望，你会明白的:-)。（我没有测试代码，但它应该工作）。

// **** //
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。

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

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

1 个答案: