2

我需要在我的网站上制作一些简短的“新闻快讯”......淡入淡出一些'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');

但是，这不会循环，我是真正的新手，因此将不胜感激。

4

6 回答 6

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);

在此处查看工作演示

于 2012-06-06T14:30:49.310 回答
0

我曾经创建了一个这样的函数。显然，您必须将内容包装在 a<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();
  });
});

}

于 2012-06-06T14:27:02.003 回答
0

假设你有什么行为你想要的方式，你可以把它们放在一个函数中，并在一个时间间隔内调用该函数

setInterval(your_function_name, time_in_milliseconds);
于 2012-06-06T14:23:22.653 回答
0

看看这个小提琴，它的工作原理：http: //jsfiddle.net/7gpYB/3/

于 2012-06-06T14:23:50.407 回答
0

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

于 2012-06-06T14:23:55.827 回答
0

这是另一个:)

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)')
})

JSFiddle 上的演示

于 2012-06-06T14:30:04.490 回答