简单的幻灯片第一张幻灯片完全淡出

Question

我正在创建一个简单的幻灯片，由于某些原因，第一张幻灯片总是完全淡出，然后在第一个循环中淡入下一个列表项。第一次转换后的一切都很好，它只是第一个加载的索引。

我试过不透明度，它的显示方式（块、列表项等），尝试在尝试淡出当前列表项之前先淡入下一张幻灯片，不同 jquery 加载（文档准备就绪，window 加载）。

为什么它只在第一次迭代时发生，我该如何解决？

function fadeBanners() {
    var totalPanels = $('#bgrs li').length;
    var currIndex = $('#bgrs li.selected').index();
    var nextPanel = ( currIndex + 1 ) % totalPanels;
    setPanel( nextPanel );
}

function setPanel(referencePanel) {
    var currIndex = referencePanel;
    var currPanel = $('#bgrs li.selected').index();

    if (currPanel != referencePanel) {
        /* Start Backgrounds - Fade Out and In */
        $('#bgrs li').eq(referencePanel).fadeIn(1000).addClass('selected');
        $('#bgrs li').eq(currPanel).fadeOut(1000).removeClass('selected');
    }
}

function startShow() {
    var timerId = setInterval(function () {
        fadeBanners()
    }, 2 * 1000);
}
startShow();

#outerWrapper {
    position: relative;
    width: 100%;
    height: 1000px;
}
#bgrs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
#bgrs li {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover!important;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}
#bgrs li.selected {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerWrapper">
    <ul id="bgrs">
        <li class="selected" style="background: url( 'http://i.imgur.com/EA7pkYA.jpg' );"></li>
        <li style="background: url( 'http://i.imgur.com/6U8rQOn.jpg' );"></li>
        <li style="background: url( 'http://i.imgur.com/MyXAIiX.jpg' );"></li>
    </ul>
</div>

对于那些更喜欢 JSFiddle 的人。预期的输出是图像应该一起淡入和淡出，以便过渡平滑。

Answer 1

第一张幻灯片的 display: block 来自于 class selected 所以一旦它失去它就会跳转到给定 #bgrs li 的 display: none，随着淡入淡出效果的发生。此快速修复只是将内联 display 属性添加到初始 selected 幻灯片，以便第一张幻灯片在淡出时保持显示。其余的工作正常，因为 fadeIn 给了他们一个内联 display 属性直到他们淡出。

function fadeBanners() {
    var totalPanels = $('#bgrs li').length;
    var currIndex = $('#bgrs li.selected').index();
    $('#bgrs li.selected').css("display", "block");
    var nextPanel = currIndex + 1;

    if (nextPanel > totalPanels - 1) {
        nextPanel = 0;
    }

    setPanel(nextPanel);
}

function setPanel(referencePanel) {
    var currIndex = referencePanel;
    var currPanel = $('#bgrs li.selected').index();

    if (currPanel != referencePanel) {
        /* Start Backgrounds - Fade Out and In */
        $('#bgrs li').eq(referencePanel).fadeIn(1000).addClass('selected');
        $('#bgrs li').eq(currPanel).fadeOut(1000).removeClass('selected');
    }
}

function startShow() {
    var timerId = setInterval(function () {
        fadeBanners()
    }, 2 * 1000);
}
startShow();

#outerWrapper {
    position: relative;
    width: 100%;
    height: 1000px;
}
#bgrs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
#bgrs li {
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover!important;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}
#bgrs li.selected {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerWrapper">
    <ul id="bgrs">
        <li class="selected" style="background: url( 'http://i.imgur.com/EA7pkYA.jpg' );"></li>
        <li style="background: url( 'http://i.imgur.com/6U8rQOn.jpg' );"></li>
        <li style="background: url( 'http://i.imgur.com/MyXAIiX.jpg' );"></li>
    </ul>
</div>

简单的幻灯片第一张幻灯片完全淡出

Simple Slideshow First Slide Entirely Fades Out

html

javascript

css

jquery

slideshow