Question

我创建了一个简单的幻灯片，由于某种原因，第一张幻灯片始终完全淡出，然后在第一个循环中淡出下一个列表项。第一次转换后的所有内容都非常精细，它只是第一个加载的索引。

我尝试过使用不透明度，它是如何显示的（块，列表项等），在尝试淡出当前列表项之前尝试淡入下一张幻灯片，不同的jquery加载（文档就绪，窗口加载）。

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

＆＃13;

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();

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

对于那些更喜欢JSFiddle的人。期望输出是图像应该一起淡入和淡出，因此转换是平滑的。

Answer 1

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

＆＃13;

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();

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: