如何避免「跳躍」的自定義jQuery滑塊

我一直在這個橫幅跳躍。我知道它的大小，但我想保持這種響應。我在wordpress中創建了一個自定義滑塊。需要100％寬度>這是一個小提琴的鏈接。 https://jsfiddle.net/SCATORY/rntnht3j/2/如何避免「跳躍」的自定義jQuery滑塊

<section id="banners"> 
    <div class="banner bone"> 
     <a href="http://investors.gobio.com/news/" target="_blank"> 
      <img style="width:100%;" src="https://www.gobio.com/research/wp-content/uploads/sites/2/2016/05/VirtualScopics_BTR_banner.jpg"> 
     </a> 
    </div> 
    <div class="banner2 btwo"> 
     <img style="width:100%;" src="http://www.gobio.com/research/wp-content/uploads/sites/2/2016/05/EvriBeat_WebHomeSliderGraphic_R1.jpg"> 
    </div> 
</section>

繼承人的HTML

$(document).ready(function() { 
    function playslider() { 
     $(".banner").fadeIn(800).delay(3600).fadeOut(800); 
     $(".banner2").delay(5200).fadeIn(800).delay(3600).fadeOut(800, playslider); 
    } 
    playslider(); 
});

jQuery的

#banners { 
    width: 100%; 
    min-height: 215px; 
    overflow: hidden; 
    background-color: #340004; 
    display: block; 
} 
.banner { 
    width: 100%; 
    Height: 100%; 
    background-color: #340004; 
} 
.banner2 { 
    display: none; 
    width: 100%; 
    Height: 100%; 
    background-color: #520002; 
}

和CSS

來源

2016-05-31 Jason Sprague

請擴展您的意思是「跳躍」。看着小提琴，我不知道你指的是什麼。 –

無法理解真正的問題。如果您試圖刪除身體的填充，請爲身體設置「填充：0」。 – RRK

在你的CSS中，高度'H'大寫爲.banner和.banner2類。修復這些問題並在#banners中嘗試固定高度（將最小高度更改爲高度）。 – Rob

使用一個回調函數來調用下一張幻燈片，而不是發出延遲是的等於之前的幻燈片動畫和延遲。

設置延遲等於先前的動畫+延遲（s）並不能保證它會在上一次動畫之後實際運行，因爲可能堆積在事件隊列中的輕微延遲。

可以對代碼進行多項改進，但這是針對您的問題最簡單的解決方案。提供一個回調函數，該函數在的末尾針對$(".banner")運行，就像您完成$(".banner2")一樣。

function playslider() { 

    $(".banner").fadeIn(800).delay(3600).fadeOut(800, function() { 
     $(".banner2").fadeIn(800).delay(3600).fadeOut(800, playslider); 
    }); 

}

來源

2016-05-31 18:51:20 hungerstar

如何避免「跳躍」的自定義jQuery滑塊

回答

相關問題