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) 
 
      }); 
 
     }); 
 

 
    }); 
 

 
\t //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); 
 
\t 
 
\t $('#j-slide-left-btn').click(function() { 
 
\t \t 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; 
 
     } 
 
\t }); 
 
\t $('#j-slide-right-btn').click(function() { 
 
\t \t 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; 
 
     } 
 
\t }); 
 

 
    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') { 
 
\t \t \t if (i + 1 == length) { 
 
       wrapper.eq(0).css('z-index', 2); 
 
\t \t \t \t wrapper.eq(0).fadeTo(1, 1); 
 
\t \t \t } else { 
 
       wrapper.eq(i + 1).css('z-index', 2); 
 
\t \t \t \t wrapper.eq(i + 1).fadeTo(1, 1); 
 
\t \t \t } 
 
\t \t } 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); 
 
\t \t 
 
\t \t if (dir == 'right') { 
 
\t \t \t if (i + 1 == length) { 
 
\t \t \t \t wrapper.eq(0).css('z-index', 1); 
 
\t \t \t \t wrapper.eq(0).find('.j-split-anchor').each(function() { 
 
\t \t \t \t \t $(this).animate({ 
 
\t \t \t \t \t \t left: 0 
 
\t \t \t \t \t }, 0); 
 
\t \t \t \t }); 
 
\t \t \t } else { 
 
\t \t \t \t wrapper.eq(i + 1).css('z-index', 1); 
 
\t \t \t \t wrapper.eq(i + 1).find('.j-split-anchor').each(function() { 
 
\t \t \t \t \t $(this).animate({ 
 
\t \t \t \t \t \t left: 0 
 
\t \t \t \t \t }, 0); 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t } else { 
 
\t \t \t if (i - 1 < 0) { 
 
\t \t \t \t wrapper.eq(length - 1).css('z-index', 1); 
 
\t \t \t \t wrapper.eq(length - 1).find('.j-split-anchor').each(function() { 
 
\t \t \t \t \t $(this).animate({ 
 
\t \t \t \t \t \t left: 0 
 
\t \t \t \t \t }, 0); 
 
\t \t \t \t }); 
 
\t \t \t } else { 
 
\t \t \t \t wrapper.eq(i - 1).css('z-index', 1); 
 
\t \t \t \t wrapper.eq(i - 1).find('.j-split-anchor').each(function() { 
 
\t \t \t \t \t $(this).animate({ 
 
\t \t \t \t \t \t left: 0 
 
\t \t \t \t \t }, 0); 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t } 
 
\t \t 
 
\t \t wrapper.eq(i).find('.j-split-anchor:first-child').animate({ 
 
\t \t \t 'left': '-100%' 
 
\t \t }, 750); 
 
\t \t wrapper.eq(i).find('.j-split-anchor:last-child').animate({ 
 
\t \t \t 'left': '100%' 
 
\t \t }, 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%; \t 
 
} 
 
#j-slide-right-btn{ 
 
    background: #3f3a3e url(../images/arrow-right-light.png) center center no-repeat; 
 
    right: 2%; \t 
 
}

<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延遲（3000s）。

但fadespeed（1000毫秒）作爲參數傳遞給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％確定......但是，有一個看看它。

我注意到了片段行爲的「延遲時間」，並且我在您的問題的評論中提到的奇怪看起來像是3000ms而不是1000ms。

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。最終，我想要一個更好的解決方案 - 一旦所有圖像都加載完畢，就會淡入整個旋轉木馬，但現在這樣做了。