Question

我有以下代码......

        $(document).ready(function() {
$('#testimonials .slide');
    setInterval(function(){
        $('#testimonials .slide').filter(':visible').fadeOut(3000,function(){
            if($(this).next('li.slide').size()){
                $(this).next().fadeIn(3000);
            }
            else{
                $('#testimonials .slide').eq(0).fadeIn(3000);
            }
        });
    },10000);

如何淡入第一张幻灯片？

HTML:

    <body>

        <ul id="testimonials">
            <li class="slide">
                <blockquote>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum velit quis lorem bibendum commodo. Quisque dolor ipsum."</blockquote>
            </li>
            <li class="slide" style="display: none">
                <blockquote>2-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
            </li>
            <li class="slide" style="display: none">

                <blockquote>3-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
            </li>
        </ul>
    </body>

Answer 1

这个jQuery：

$(document).ready(function() {
    $('#firstSlide').fadeIn();
    $('#testimonials .slide');
    setInterval(function(){
        $('#testimonials .slide').filter(':visible').fadeOut(3000,function(){
            if($(this).next('li.slide').size()){
                $(this).next().fadeIn(3000);
            }
            else{
                $('#testimonials .slide').eq(0).fadeIn(3000);
            }
        });
    },10000);  
});

这个HTML：

<body>
  <ul id="testimonials">
            <li class="slide" id="firstSlide" style="display:none;">
                <blockquote>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum velit quis lorem bibendum commodo. Quisque dolor ipsum."</blockquote>
            </li>
            <li class="slide" style="display: none">
                <blockquote>2-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
            </li>
            <li class="slide" style="display: none">

                <blockquote>3-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
            </li>
        </ul>
</body>

你可以在这个jsFiddle中看到一个有效的例子：http://jsfiddle.net/bznPA/

在第一张幻灯片中淡出

1 个答案: