1

カルーセルが遷移間でフェードしない理由を理解しようとしています。期待どおりに循環しますが、トランジション効果を適用して、あるパネルを次のパネルにフェードインさせないようです。

これが私がこれまでに持っているものです：

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

誰かが私が間違っていることについて何か洞察を持っているなら、私はそれを非常に感謝しています.

4

1 に答える 1

0

くそ。どうでも。自分で解決しました。もう 1 つのスタイルは、カルーセルの div 要素を display: none に設定することでしたactive。

于 2012-10-12T21:19:49.863 に答える