jQuery 计时/循环延迟

Question

我需要在我的网站上制作一些简短的“新闻快讯”...淡入和淡出一些 `s 并需要它们循环...

到目前为止我有这样的东西:

$('.text01').hide().fadeIn('slow').delay(3000).fadeOut('slow');
$('.text02').hide().delay(4000).fadeIn('slow').delay(3000).fadeOut('slow');
$('.text03').hide().delay(8000).fadeIn('slow').delay(3000).fadeOut('slow');
$('.text04').hide().delay(12000).fadeIn('slow').delay(3000).fadeOut('slow');

然而，这不会循环，我是一个真正的新手，所以任何帮助将不胜感激。

Answer 1

您应该在页面中创建一个 div:

<div id='newsticker'></div>

然后将所有新闻报道放入一个数组中并运行这个调用自身的函数:

var newsItems = ['England will win Euro 2012','Pigs will fly by 2030','Third news story','Final news story'];

function displayNews(itemID){
    $('#newsticker').html(newsItems[itemID]);
    $('#newsticker').fadeIn('slow',function(){
        $('#newsticker').delay(4000).fadeOut('slow', function(){
            itemID++;
            if (itemID == newsItems.length){
                itemID = 0;
            }
            displayNews(itemID);            
        });
    });
}

//Start off the news ticker
displayNews(0);

查看 Working DEMO here