Question

I have a part in a website that I need to show as a news ticker.

It looks like this:

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

I need a javascript code to show news repeatedly without using plugins. The idea is to show a span and hide the rest of spans and repeat with order each n seconds.

How can I do that ?

Answer 1

How about something like this (obviously changing the interval to suit your needs, it’s in milliseconds):

$(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);
});

Here’s a working demo > http://jsfiddle.net/J35Sa/