0

我在旋转木马 li 内有一个淡入淡出的内容幻灯片放映。

淡入淡出幻灯片第一次工作正常，但当它第二次重复时，幻灯片 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
    });

这是小提琴

等到它完成 3 次向下滑动，然后当它再次开始第一个 li 时，fade div 没有显示。

4

1 回答 1

1

在这里工作演示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>
于 2013-06-07T08:04:00.433 回答