jQuery Carousel Plugin按钮延迟问题

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变量之间的混淆。

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

但是，使用fadespeed （1000ms）作为fadeSlides()函数的参数， 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));

我不是100％确信...但是，看看吧。

我在摘要行为中注意到的“更长的延迟”以及我在您的问题的注释中提到的奇怪地看起来是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。最终，我希望有一个更好的解决方案-加载所有图像后，在整个轮播中淡入淡出，但现在可以了。