[英]Delaying slider animation and change effect to fade?
我为滑块使用了一个非常简单的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动画中,我使用了完整的回调函数,该函数在动画完成后将slideInPrgress
设置为false。
(可选)您可以设置另一个变量,该变量指示有人在进行上一个动画时按下了箭头,并在上一个完成后进行滑动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.