Question

我需要在我的网站上制作一些简短的“新闻报道”......淡入淡出某些东西并让它们循环......

到目前为止，我有这样的事情：

$('.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

Answer 2

假设你的行为符合你想要的方式，你可以将它们放在一个函数中并按时间间隔调用该函数

setInterval(your_function_name, time_in_milliseconds);

Answer 3

看看这个小提琴，它有效：http://jsfiddle.net/7gpYB/3/

Answer 4

据我所知，您可能会看到类似内容滑块的内容。我会尝试Nivo Slider之类的东西。它是一个jQuery插件，你可以很容易地实现，我更喜欢它，因为它使你能够使用CSS为它的每个方面进行整理，并将你的源代码保持在最低限度。它还支持许多回调函数以及转换。

Answer 5

我曾经创造过这样的功能。显然你必须将你的内容包装在<li>中才能使它工作......但也许它会给你一个想法。

function liRotator() { 
var liprev = $("ul.rotator li:first-child");
$(liprev).each(function(g) {
  $(this).delay(g*1600).slideUp(function() {
    $(this).appendTo(this.parentNode).slideDown();
  });
});

}

Answer 6

这是另一个：）

function flow(elem){
    el = $(elem);
    el.fadeIn('slow').delay(3000).fadeOut('slow', function(){
        nextElem = el.is(':last-child') ? el.siblings(':eq(0)') : el.next();
        flow(nextElem);
    });
}
$(document).ready(function(){
    flow('span:eq(0)')
})

Demo at JSFiddle

jQuery定时/循环延迟

6 个答案: