2

私は自分のサイトである種の短い「ニュースフラッシュ」を作成する必要があります...いくつかの`をフェードインおよびフェードアウトし、それらを循環させる必要があります...

これまでのところ、私はこのようなものを持っています：

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

ページに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

あなたが持っているものがあなたが望むように振る舞うと仮定して、あなたはそれらを関数に入れて、時間間隔でその関数を呼び出すことができます

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

私の知る限り、あなたはコンテンツスライダーのようなものを見ているかもしれません。NivoSliderのようなものを試してみます。これは簡単に実装できるjQueryプラグインであり、CSSを使用してあらゆる側面をスキンし、ソースコードを最小限に抑えることができるため、私はそれを好みます。また、トランジションだけでなく、多くのコールバック関数もサポートしています。

于 2012-06-06T14:23:55.827 に答える
0

このような関数を一度作成しました。明らかに、コンテンツを機能させるには、コンテンツをでラップする必要があります<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

ここにもう1つあります:)

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 に答える