javascript - 在轮播中的图像之间淡入淡出

Question

我一直在努力理解为什么我的轮播不会在转换之间淡出。它按预期循环，但似乎没有应用过渡效果使一个面板淡入下一个面板。

这是我目前所拥有的:

/* Javascript */
function cycle() {
    var active = $('.carousel .item.active');
    var panels = $('.carousel .item');
    var pos = panels.index(active);
    var next = panels.eq((pos >= 5) ? 0 : ++pos);

    next.addClass('active');
    active.removeClass('active');
}

var interval = setInterval(cycle, 2000);

/* CSS */
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.carousel .item {
    -webkit-transition: opacity 0.6s ease-in-out;
    -moz-transition: opacity 0.6s ease-in-out;
    -o-transition: opacity 0.6s ease-in-out;
    transition: opacity 0.6s ease-in-out;
    opacity: 0;
}
.carousel .item.active {
    opacity: 1;
}

/* HTML */
<div id="id_landing_carousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item" data-nav-button="nav-home">
            <img src="/media/carousel/home.png">
            <div class="carousel-caption">
                <h4><p>Welcome</p></h4>
            </div>
        </div>
        <div class="item" data-nav-button="nav-residential">
            <img src="/media/carousel/residential.jpg">
            <div class="carousel-caption">
                <h4><p>Residential</p></h4>
            </div>
        </div>
        <div class="item" data-nav-button="nav-commercial">
            <img src="/media/carousel/commercial.jpg">
            <div class="carousel-caption">
                <h4><p>Commercial</p></h4>
            </div>
        </div>
        <div class="item" data-nav-button="nav-service">
            <img src="/media/carousel/service.jpg">
            <div class="carousel-caption">
                <h4><p>Service</p></h4>
            </div>
        </div>
        <div class="item active" data-nav-button="nav-blog">
            <img src="/media/carousel/blog.jpg">
            <div class="carousel-caption">
                <h4><p>Blog</p></h4>
            </div>
        </div>
        <div class="item" data-nav-button="nav-contact">
            <img src="/media/carousel/contact.jpg">
            <div class="carousel-caption">
                <h4><p>Contact us</p></h4>
            </div>
        </div>
    </div>
</div>

如果有人对我做错了什么有任何见解，我将不胜感激。

Answer 1

该死的。没关系。自己解决了。另一种样式是将轮播的 div 元素设置为 display: none 当它不是 active 时。