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

Question

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

我试过不透明度，它是如何显示的( block 、列表项等)，尝试在尝试淡出当前列表项之前先在下一张幻灯片中淡出，不同的 jquery 加载(文档就绪, 窗口加载).

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

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 来自 selected 类，所以一旦它丢失，它就会跳转到给定的 display: none到 #bgrs li，因为出现淡入淡出效果。此快速修复只是将内联 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>