Question

我一直在跳这个横幅。我知道它的尺寸，但我想保持这种反应。我在wordpress中创建了一个自定义滑块。需要100％宽度>这是一个小提琴的链接。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

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

将延迟设置为等于之前的动画+延迟（s）并不能保证它会在上一个动画之后实际运行，因为可能会在事件队列中堆积一些延迟。

可以对代码进行一些改进，但这是解决您问题的最简单方法。正如fadeOut()一样，提供一个在$(".banner") $(".banner2")末尾运行的回调函数。

function playslider() {

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

}

如何避免自定义jquery滑块“跳”

1 个答案: