很简洁的循环滚动效果

< ul id = " contain " >< li > alist  1 </ i >< li > blist  2 </ i >< li > clist  3 </ i >< li > dlist  4 </ i ></ ul >
< SCRIPT LANGUAGE = " JavaScript " >
function  xx() ... {
var container=document.getElementById("contain");
container.appendChild(container.firstChild);
}
setInterval( " xx() " , 800 );
</ SCRIPT >

 

完善点的:

 

< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< style type = " text/css " >
#container ... {width:300px; height:100px; margin:0px; overflow:hidden; font-size:12px}
#container div ... {height:20px}
</ style >
< script type = " text/javascript " >
var  tt;
function  scroll() ... {
    var h = parseInt(container.firstChild.style.marginTop) * -1;
    if(isNaN(h)) h = 0;
    if(h==0)...{
        var clonenode = container.firstChild.cloneNode(true);
        container.appendChild(clonenode);
        container.firstChild.style.marginTop = "-1px"; 
        tt=setInterval("scroll()",100);
    }else if(h>0 && h < container.firstChild.offsetHeight)...{
        container.firstChild.style.marginTop = (h + 1)* -1 + "px"; 
    }else...{
        container.removeChild(container.firstChild);
        clearInterval(tt);
        scroll();
    }
    
}

</ script >
</ head >

< body >
< div id = " container "  onmouseover = " clearInterval(tt) "  onmouseout = " tt=setInterval('scroll()',100); " >< div > 第一个 </ div >< div > 第二个 </ div >< div > 第三个 </ div >< div > 第四个 </ div >< div > 第五个 </ div ></ div >
< input type = " button "  name = " bt "  value = " 滚动 "  onclick = " scroll(); " >
< input type = " text "  name = " view " >
</ body >
</ html >