0

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

1 回答 1

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。

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

于 2013-10-18T22:47:12.037 回答