1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无限滚动代码</title> 
  6. <style type="text/css"> 
  7. *{padding:0; margin:0;} 
  8. #roll{ border:1px solid red;height:400px; margin:10px auto; width:350px; overflow:hidden;list-style:none;} 
  9. #roll li{height:30px; padding-left:10px;line-height:30px; border-bottom:1px solid #ddd;} 
  10. a{font-size:12px; text-decoration:none; font-family:'宋体';} 
  11. </style> 
  12. </head> 
  13. <body> 
  14.   <ol id="roll"> 
  15.     <li><a href="#">今日热点</a></li> 
  16.     <li><a href="#">今日热点</a></li> 
  17.     <li><a href="#">今日热点</a></li> 
  18.     <li><a href="#">今日热点</a></li> 
  19.     <li><a href="#">今日热点</a></li> 
  20.     <li><a href="#">今日热点</a></li> 
  21.     <li><a href="#">今日热点</a></li> 
  22.   </ol> 
  23.   <div id="bug"></div> 
  24. </body> 
  25. <script type="text/javascript"> 
  26. (function(A){ 
  27.    function _ROLL(obj){ 
  28.       this.ele = document.getElementById(obj); 
  29.       this.interval = false; 
  30.       this.currentNode = 0; 
  31.       this.passNode = 0; 
  32.       this.speed = 100; 
  33.       this.childs = _childs(this.ele); 
  34.       this.childHeight = parseInt(_style(this.childs[0])['height']); 
  35.           addEvent(this.ele,'mouseover',function(){ 
  36.                                                window._loveYR.pause(); 
  37.                                             }); 
  38.           addEvent(this.ele,'mouseout',function(){ 
  39.                                                window._loveYR.start(_loveYR.speed); 
  40.                                             }); 
  41.    } 
  42.    function _style(obj){ 
  43.      return obj.currentStyle || document.defaultView.getComputedStyle(obj,null); 
  44.    } 
  45.    function _childs(obj){ 
  46.       var childs = []; 
  47.       for(var i=0;i<obj.childNodes.length;i++){ 
  48.          var _this = obj.childNodes[i]; 
  49.          if(_this.nodeType===1){ 
  50.             childs.push(_this); 
  51.          } 
  52.       }    
  53.       return childs; 
  54.    } 
  55.     function addEvent(elem,evt,func){ 
  56.        if(-[1,]){ 
  57.            elem.addEventListener(evt,func,false);    
  58.        }else{ 
  59.            elem.attachEvent('on'+evt,func); 
  60.        }; 
  61.     } 
  62.     function innerest(elem){ 
  63.       var c = elem; 
  64.       while(c.childNodes.item(0).nodeType==1){ 
  65.           cc = c.childNodes.item(0); 
  66.       } 
  67.       return c; 
  68.     } 
  69.    _ROLL.prototype = { 
  70.       start:function(s){ 
  71.               var _this = this; 
  72.               _this.speed = s || 100; 
  73.               _this.interval = setInterval(function(){ 
  74.                             _this.ele.scrollTop += 1; 
  75.                             _this.passNode++; 
  76.                             if(_this.passNode%_this.childHeight==0){ 
  77.                                   var o = _this.childs[_this.currentNode] || _this.childs[0]; 
  78.                                   _this.currentNode<(_this.childs.length-1)?_this.currentNode++:_this.currentNode=0; 
  79.                                   _this.passNode = 0; 
  80.                                   _this.ele.scrollTop = 0; 
  81.                                   _this.ele.appendChild(o); 
  82.                             } 
  83.                           },_this.speed); 
  84.       }, 
  85.       pause:function(){ 
  86.          var _this = this; 
  87.          clearInterval(_this.interval); 
  88.       } 
  89.    } 
  90.     A.marqueen = function(obj){A._loveYR = new _ROLL(obj); return A._loveYR;} 
  91. })(window); 
  92. marqueen('roll').start(10/*速度默认100*/); 
  93. </script> 
  94. </html>