jQuery Carousel插件按钮延迟问题

Question

我正在制作旋转木马jQuery插件，但无法弄清楚为什么左右按钮仅在几秒后才能工作...如果您尝试立即点击其中一个，则淡化效果会产生意外延迟，但如果你先等一下，然后点击，它会立即消失，就像它应该的那样。我尝试删除间隔，这没有帮助。请运行下面的代码段，看看我的意思。真正奇怪的部分是，如果你将效果从“淡入淡出”更改为“分割”，当你点击按钮时效果就会立刻发生。

(function ($) {
/* jSlide */
$.fn.jSlide = function( options ) {
    
    var settings = $.extend({
        buttons: true,
        speed: 3000,
        effect: "slide",
        sizing: "auto",
        fadeSpeed: 1000
    }, options );

    //Main wrapper
    var styles = {
        'position': 'relative',
        'overflow': 'hidden'
    };
    $(this).css( styles );

    //Anchors & Sizing
    this.children().each( function () {
        
        //Sizing
        if ( settings.sizing == "auto" ) {
            var styles = {
                'position': 'absolute',
                'width': 'auto',
                'height': 'auto',
                'min-width': '100%',
                'min-height': '100%'
            }
            $(this).css( styles );
        } else if ( settings.sizing == "fullWidth" ) {
            var styles = {
                'position': 'absolute',
                'width': '100%',
                'height': 'auto'
            }
            if ( settings.effect == "split" ) {
                styles.width = '200%';
            }
            $(this).css( styles );
        } else if ( settings.sizing == "fullHeight" ) {
            var styles = {
                'position': 'absolute',
                'width': 'auto',
                'height': '100%',
            }
            $(this).css( styles );
        }

        //Anchors
        if ( settings.effect == "split" ) {
            $(this).wrap('<div class="j-slide-wrapper"></div>').wrap('<div class="j-split-anchor"></div>');
            $(this).clone().appendTo($(this).closest('.j-slide-wrapper')).wrap('<div class="j-split-anchor"></div>');
        } else {
            $(this).wrap('<div class="j-slide-wrapper"></div>');
        }

        var length = $('.j-slide-wrapper').length;
        $('.j-slide-wrapper').each( function (index) {
           $(this).css('z-index', length - index) 
        }).promise().done(function () { 
            $('.j-slide-wrapper').each( function () {
                $(this).animate({
                    'opacity': 1
                }, 1000)
            });
        });

    });

	//Buttons
    if ( settings.buttons ) {
        this.prepend(
            '<button id="j-slide-left-btn" class="j-slide-btn styled-button"></button>' +
            '<button id="j-slide-right-btn" class="j-slide-btn styled-button"></button>'
        )
    }
    var length = $('.j-slide-wrapper').length;
    $('.j-slide-btn').css('z-index', length + 1);

    //Effect
    var i = 0,
        wrapper = $(this).find('.j-slide-wrapper');
        timer = setInterval( function () {
            var length = wrapper.length;
            
            if (settings.effect == "fade") {
                fadeSlides(i, wrapper, length, 'right', settings.fadeSpeed);
            } else if ( settings.effect == "split" ) {
                splitSlides(i, wrapper, length, 'right');
            }
            
            if (i + 1 == length) {
                i = 0;
            } else {
                i = i + 1;
            }
        }, settings.speed);
	
	$('#j-slide-left-btn').click( function() {
		clearInterval(timer);
        var length = wrapper.length;
        
        if ( settings.effect == "fade" ) {
            fadeSlides(i, wrapper, length, 'left', settings.fadeSpeed);
        } else if (settings.effect == "split") {
            splitSlides(i, wrapper, length, 'left');  
        }
        
        if (i - 1 < 0) {
            i = length - 1;
        } else {
            i = i - 1;
        }
	});
	$('#j-slide-right-btn').click( function() {
		clearInterval(timer);
        var length = wrapper.length;
        
        if ( settings.effect == "fade") {
            fadeSlides(i, wrapper, length, 'right', settings.fadeSpeed);  
        } else if (settings.effect == "split") {
            splitSlides(i, wrapper, length, 'right');
        }
        if (i + 1 == length) {
            i = 0;
        } else {
            i = i + 1;
        }
	});

    function fadeSlides (i, wrapper, length, dir, speed) {

        wrapper.eq(i).css('z-index', 3);
        wrapper.filter(':gt(' + i + ')').css('z-index', 1);
        wrapper.filter(':lt(' + i + ')').css('z-index', 1);
        
        if ( dir == 'right') {
			if ( i + 1 == length) {
                wrapper.eq(0).css('z-index', 2);
				wrapper.eq(0).fadeTo(1, 1);
			} else {
                wrapper.eq(i + 1).css('z-index', 2);
				wrapper.eq(i + 1).fadeTo(1, 1);
			}
		} else {
            if ( i - 1 < 0) {
                wrapper.eq(length - 1).css('z-index', 2);
                wrapper.eq(length - 1).fadeTo(1, 1)
            } else {
                wrapper.eq(i - 1).css('z-index', 2);
                wrapper.eq(i - 1).fadeTo(1, 1)
            } 
        }
        
        wrapper.eq(i).fadeTo(speed, 0, function() {
            $(this).css('z-index', 1);
        });
            
    }

    function splitSlides (i, wrapper, length, dir) {

        wrapper.eq(i).css('z-index', 2);
		
		if ( dir == 'right') {
			if ( i + 1 == length) {
				wrapper.eq(0).css('z-index', 1);
				wrapper.eq(0).find('.j-split-anchor').each( function () {
					$(this).animate({
						left: 0
					}, 0);
				});
			} else {
				wrapper.eq(i + 1).css('z-index', 1);
				wrapper.eq(i + 1).find('.j-split-anchor').each( function () {
					$(this).animate({
						left: 0
					}, 0);
				});
			}
		} else {
			if ( i - 1 < 0) {
				wrapper.eq(length - 1).css('z-index', 1);
				wrapper.eq(length - 1).find('.j-split-anchor').each( function () {
					$(this).animate({
						left: 0
					}, 0);
				});
			} else {
				wrapper.eq(i - 1).css('z-index', 1);
				wrapper.eq(i - 1).find('.j-split-anchor').each( function () {
					$(this).animate({
						left: 0
					}, 0);
				});
			}
		}
		
		wrapper.eq(i).find('.j-split-anchor:first-child').animate({
			'left': '-100%'
		}, 750);
		wrapper.eq(i).find('.j-split-anchor:last-child').animate({
			'left': '100%'
		}, 750);
      
    }

    return this;
}
} (jQuery));

$(window).on("load", function () {
    $('#split-images').jSlide({
        effect: "fade",
        sizing: "auto",
        speed: 3000,
    });
});

body, html{
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
}
#split-images{
    display: block;
    width: 100%;
    height: 100%;
}
.j-slide-wrapper{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/* .j-slide-wrapper::before{
    display: table;
    table-layout: fixed;
    content: "";
}
.j-slide-wrapper::after{
    display: table;
    table-layout: fixed;
    content: "";
    clear: both;
} */
.j-split-anchor {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
    overflow: hidden;
}
.j-slide-wrapper:nth-of-type(n + 2) .j-split-anchor:first-child{
    left: -100%;
}
.j-slide-wrapper:nth-of-type(n + 2) .j-split-anchor:last-child{
    left: 100%;
}
.j-split-anchor:first-child img{
    right: 0;
    -ms-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
    -webkit-transform:translateX(50%);
    transform: translateX(50%);
}
.j-split-anchor:last-child img{
    left: 0;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform:translateX(-50%);
    transform: translateX(-50%);
}

/* ************************************** BUTTONS ************************** */
.j-slide-btn{
    position: absolute;
    height: 25px;
    width: 25px;
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform:translateY(-50%);
    transform: translateY(-50%);
    z-index: 3;
    opacity: 0.7;
}
#j-slide-left-btn{
    background: #3f3a3e url(../images/arrow-left-light.png) center center no-repeat;
    left: 2%;	
}
#j-slide-right-btn{
    background: #3f3a3e url(../images/arrow-right-light.png) center center no-repeat;
    right: 2%;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="split-images">
        <img src="https://pixabay.com/static/uploads/photo/2015/03/25/06/48/love-688582_960_720.jpg" alt= "" />
        <img src="https://prod01-cdn04.cdn.firstlook.org/wp-uploads/sites/1/2016/04/GoogleWH-lead-FIN-article-header.jpg" alt= "" />
        <img src="https://lh4.googleusercontent.com/KRvgImt_ugjuflC9uMurL5Dln3PTeofLN9xQtHESNs_ehRbFDezNrD9IkBYmzPqFeZ6tFb_lG08=s640-h400-e365" alt= "" />
    </div>

Answer 1

我认为问题来自speed和fadeSpeed vars之间的混淆。

speed或setting.speed主要用于setTimout延迟（3000秒）。

但fadespeed（1000ms）用作此fadeSlides()函数的参数：

function fadeSlides (i, wrapper, length, dir, speed) {...});

在加载时，您可以定义：

$(window).on("load", function () {
    $('#split-images').jSlide({
        effect: "fade",
        sizing: "auto",
        speed: 3000,
    });
});

在准备好文档时，你可以像这样扩展jSlide：

(function ($) {
    /* jSlide */
    $.fn.jSlide = function( options ) {
        var settings = $.extend({
            buttons: true,
            speed: 3000,
            effect: "slide",
            sizing: "auto",
            fadeSpeed: 1000
        }, options );

        //... More code lines skipped here

    }
} (jQuery));

我不是百分百肯定......但是，请看一下。

我在片段行为上注意到的“更长的延迟”，我在你的问题的评论中提到的奇怪的看起来像是3000毫秒而不是1000毫秒。

Answer 2

问题在于这段代码：

$('.j-slide-wrapper').each( function (index) {
       $(this).css('z-index', length - index) 
    }).promise().done(function () { 
        $('.j-slide-wrapper').each( function () {
            $(this).animate({
                'opacity': 1
            }, 1000)
        });
    });

幻灯片无法再次制作动画，因为它们已经处于动画制作过程中！为了解决这个问题，我将动画时间从1000减少到1.最后，我想要一个更好的解决方案 - 一旦所有图像都加载到整个旋转木马中淡入淡出，但现在这样做了。