HTML

Question

我在旋转木马里面有一个淡入淡出的内容幻灯片。

淡入淡出幻灯片首次正常工作，但第二次重复时，幻灯片div根本没有显示。

使用的代码

 var quotes = $(".inner_detail div");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();    
//Slider
    $('#news-container').vTicker({ 
        speed: 800,
        pause: 6000 * quotes.length-1,
        animation: 'fade',
        mousePause: false,
        showItems: 1
    });

以下是 FIDDLE

等到它完成3次滑动，然后再次启动第一个li，然后淡入div没有显示。

Answer 1

在这里工作DEMO http://jsfiddle.net/yeyene/mvNEE/39/。

清理你的html代码，不需要使用ul li，只需使用所有div。

因为你已经在使用$（“。inner_detail div”）。

HTML

<div class="editorial" id="news-container">
    <!-- This is the slide show-->
    <div class="inner_detail">
        <!--First book-->
        <div>
            <img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image1.jpg">
            <h1>Thrilling, Brave, and Controversial</h1>
            <span>30 Pieces of Silver: An Extremely Controversial Historical Thriller</span> 
        </div>

        <!--Second book-->
        <div>
            <img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image2.jpg">
            <h1>Not quite What I Expected.</h1>
            <span>The Book of Shadows : The Unofficial Charmed Companion</span> 
        </div>

        <!--Third book-->
        <div>
            <img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image3.jpg">
            <h1>I would give it many more than five stars.</h1>
            <span>The Red Tent</span> 
        </div>

        <div> 2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info </div>

        <div> 3) Lorem ipsum dolor sit amet more info more info more info more info </div>
    </div>
</div>

用手风琴重复淡化效果

1 个答案:

HTML