-1

ニュース ティッカーとして表示する必要がある Web サイトの一部があります。

次のようになります。

<div class="news">
  <span>NEWS 1</span>
  <span>NEWS 2</span>
  <span>NEWS 3</span>
</div>

プラグインを使用せずにニュースを繰り返し表示するには、JavaScript コードが必要です。アイデアは、spanを表示して残りを非表示にし、spans毎秒順番に繰り返すことnです。

どうやってやるの ？

4

3 に答える 3

1

そのためのHTMLマークアップは、ランダムスパンよりもリストとして意味があります。だから私はそれを変えました。

HTML：

<ul class="news">
  <li>NEWS 1</li>
  <li>NEWS 2</li>
  <li>NEWS 3</li>
</ul>

JavaScript：

var lis = $(".news li");
function showNext() {
  var next = lis.filter(".active").removeClass("active").next();
  if (next.length == 0) {
    next = lis.first();
  }
  next.addClass("active");
  window.setTimeout(showNext,5000);
}
showNext();

CSS：

.news li.active {
  display:block;
}
.news li {
  display:none
}

実行例：

JSFiddle

于 2013-01-16T15:31:53.283 に答える
1

このようなものはどうですか（明らかに、ニーズに合わせて間隔を変更します。ミリ秒単位です）：

$(function() { 
    var num_stories = $('.news > span').length,
        news_interval = 1000,
        current_story = 0;

    $('.news > span:gt(0)').hide();

    window.setInterval(function() {  
        var next_story = (current_story == (num_stories - 1)) ? 0 : current_story + 1;
        $('.news > span:eq(' + current_story + ')').hide();
        $('.news > span:eq(' + next_story + ')').show();
        current_story = next_story;
    }, news_interval);
});

これが実際のデモです> http://jsfiddle.net/J35Sa/

于 2013-01-16T15:27:56.390 に答える
1

このような何かがそれを行う必要があります:

$(function() {
    var $items = $('div.news > span').hide();
    var curIndex = 0;
    setInterval(function() {
        $items.hide();

        curIndex++;
        if(curIndex >= $items.length) {
            curIndex = 0;
        }
        $items.eq(curIndex).show();
    }, 2000);
});

この jsfiddle で動作していることがわかります: http://jsfiddle.net/YxbRL/

于 2013-01-16T15:28:05.280 に答える