Question

I’ve got the basics of a content rotator done, the only problem is it doesn’t loop itself back to the beginning and I cannot figure out why! It is a very simple javascript script:

window.onload = function() { setInterval("transition()", 5000); }

    function transition()
    {
        var y = document.getElementById("featured").getElementsByTagName("li");
        for (var i=0;i<y.length;i++)
        {
            if (y[i].className == "current")
            {
                y[(i+1)].className = "current";
                y[i].className = "";
                break;
            }
        }
    }

It keeps stopping at the end of the list, basically I just want it to loop. Any help?

Answer 1

You can make this a little smarter by taking advantage of the wonderful language that is Javascript:

window.onload = function() {
  var y = document.getElementById('featured').getElementsByTagName('li');
  var ylen = y.length, index = 0;
  y[0].className = 'current';
  setInterval(function() {
    y[index].className = '';
    index = (index + 1) % ylen;
    y[index].className = 'current';
  }, 5000);
};

When you pre-define the list of <li> elements like that, the function you provide for the interval timer can reference them every time the timer fires. The index variable increments up until it hits the end of the array, and then it’ll be set back to zero.