Question

I have been scouring through the Internet trying to find a simple <li> rotator with the same functionality as that on the Twitter homepage(Top Tweets) before signing in.

I’m going through a JQuery book but the rotator doesn’t meet the simplicity of what I need it for…plus I’m a novice.

Does anyone know how to achieve this…Also I have come across the Cycle plug-in for JQuery but I really would like to understand what’s going on behind the scenes & expand my knowledge

Any help is much appreciated, Thanks

Answer 1

Having to guess a bit at what you mean by “rotator”, but:

var counter, list;

// Initial fill
list = $('#thelist');
for (counter = 0; counter < 5; ++counter) {
  $("<li>" + counter + "</li>").appendTo(list);
}

// Start rotating
setInterval(rotate, 1000);

// Rotator function
function rotate() {
  var list = $('#thelist');
  list.find("li:first").remove();
  $("<li>" + counter + "</li>").hide().appendTo(list).fadeIn();
  ++counter;
}

(Live example) If you want to grab new li data from the server, you’ll need to use ajax, but other than that the basic idea is the same.