javascript 滚动+停留 代码

HTML部分

< style  type ="text/css" >
<!--
ul{}{height:230px;overflow:hidden}
-->
</ style >

< ul  id ="rolltxt" >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称1 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称2 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称3 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称4 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称5 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称6 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称7 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称8 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称9 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称10 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称11 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称12 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称13 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称14 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称15 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称16 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称17 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称18 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称19 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称20 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称21 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称22 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称23 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称24 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称25 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称26 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称27 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称28 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称29 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称30 </ p ></ li >
< li >< a  href ="#" >< img  src ="images/pro.gif"   /></ a >< p > 产品名称31 </ p ></ li >
</ ul >

Javascript代码部份

< script  language ="javascript" >
// JavaScript Document

function extractNodes(pNode){
    if(pNode.nodeType == 3)return null;
    var node,nodes = new Array();
    for(var i=0;node= pNode.childNodes[i];i++){
        if(node.nodeType == 1)nodes.push(node);
    }
    return nodes;
}
var objj=document.getElementById("rolltxt");
for(i=0;i<4;i++){
    objj.appendChild(extractNodes(objj)[i].cloneNode(true));
}
settime=0;
var t=setInterval(rolltxt,10);  //行动时间
function rolltxt(){
    if(objj.scrollTop % (objj.clientHeight+0) ==0){  // -0 高度
        settime+=1;
        if(settime==300){  //停留时间
            objj.scrollTop+=1;
            settime=0;
        }
    }else{
        objj.scrollTop+=1;
        if(objj.scrollTop==(objj.scrollHeight-objj.clientHeight)){ 
            objj.scrollTop=0;
        }
    }
}
objj.onmouseover=function(){clearInterval(t)}
objj.onmouseout=function(){t=setInterval(rolltxt,10)}        //  鼠标移动后行动时间
</ script >

转载于:https://www.cnblogs.com/0754ydj/archive/2008/07/12/1241318.html