jquery - 如何避免来自 "jumping"的自定义 jquery slider

Question

我一直在跳这个横幅。我知道它的大小，但我想保持它的响应性。我在 wordpress 中创建了一个自定义 slider 。需要 100% 宽度> 这是 fiddle 的链接。 https://jsfiddle.net/SCATORY/rntnht3j/2/

<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

Answer 1

使用回调函数调用下一张幻灯片，而不是发出与前一张幻灯片动画和延迟相等的延迟。

将延迟设置为等于之前的动画 + 延迟并不能保证它实际上会在之前的动画之后立即运行，因为轻微的延迟可能会堆积在事件队列中。

可以对代码进行许多改进，但这是对您的问题最简单的解决方案。为 $(".banner") 提供一个在 fadeOut() 结束时运行的回调函数，就像您对 $(".banner2 ").

function playslider() {

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

}