[英]Delaying slider animation and change effect to fade?
I am using a very simple JS for my slider, currently the images slide horizontally, left or right depending on which arrow you press. 我为滑块使用了一个非常简单的JS,当前图像根据您按下的箭头水平左右滑动。 The problem I am experiencing is that there is no delay on the animation so if you click the direction arrows several times rapidly, it takes a while for the slides to catch up and there's a lot of strange overlapping.
我遇到的问题是动画没有延迟,因此,如果快速单击方向箭头几次,幻灯片会花费一些时间,并且会有很多奇怪的重叠。
I would like to change the animation effect to a fade and set up a delay so that you cannot advance to the next or previous slide until the current slide is done animating. 我想将动画效果更改为淡入淡出并设置延迟,以使您无法前进到下一张或上一张幻灯片,直到完成对当前幻灯片的动画处理为止。 Any help would be greatly appreciated!
任何帮助将不胜感激!
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;
};
I would just use some control variables. 我只使用一些控制变量。
Set some global (boolean) variable indicating that sliding is in progress and dont allow another sliding while previous is in progress. 设置一些全局(布尔)变量,指示正在进行滑动,并且不允许在进行前一个滑动。
UPDATE: I took your updated code, made some changes and marked changes I made in your code with // **** //. 更新:我使用了更新的代码,进行了一些更改,并使用// **** //标记了在代码中所做的更改。 Hope, you will understand it :-).
希望您会理解:-)。 (I didnt test the code, but it should work).
(我没有测试代码,但是应该可以)。
// **** //
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--;
// **** //
}
In jQuery animate I used complete callback function, which sets slideInPrgress
to false after animation completes. 在jQuery动画中,我使用了完整的回调函数,该函数在动画完成后将
slideInPrgress
设置为false。
Optionally, you can set another variable indicating that someone pressed arrow while previous animation was in progress and do that slide after previous finished. (可选)您可以设置另一个变量,该变量指示有人在进行上一个动画时按下了箭头,并在上一个完成后进行滑动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.