I am creating a scrolling marquee along the top of my page, I have 3 list items <li> in a <ul> tag ID is "ticker". I have managed to get the first of them to scroll along the page, and have hidden it. I cannot seem to get the next one to do exactly the same thing, everything I try I seem to just get the 3 items up on the page with no movement.

Here is my JS file snippet, please see what I can do to achieve this, thanks!!...

var el = 0;
function setup() {
var objA = document.getElementById('ticker');
if (!objA) return;
var objB = document.getElementsByTagName('ul');
if (!objB) return;
var tickArray = objA.getElementsByTagName('li');
for (i=0; i<=2; i++) {
tickArray[i].style.display="none";
}
tickHandlerInterval = window.setInterval('tickHandler();',20);
}
function tickHandler() {
var objE = document.getElementById('ticker');
var ticArray = objE.getElementsByTagName('li');
ticArray[el].style.display="inline";
var l = parseFloat(objE.style.left);
if (isNaN(l)) {
l=100;
} else if (l > 0) {
l--;
}
objE.style.left = l + '%';
if (l == 0) {
ticArray[el].style.display="none";
}
}



//Do I need to create some sort of loop for the 2 other list items in my array?