HTML纯js滚动文字广告轮播代码

弘毅

1. 
   
2. 
   
3. 
   
4. <div style="height:18px; line-height:18px; width:888px; margin:10px 30px;">
   
5. <script>
   
6. var marqueeContent=new Array();   //滚动新闻
   
7. marqueeContent[0]='<font color="#ff0000">温馨提示： </font><a href="/" target=_blank>二维码又称二维条码，是在一维条码的基础上扩展出的一种具有可读性的条码。</a><br>';
   
8. marqueeContent[1]='<font color="#ff0000">温馨提示： </font><a href="/" target=_blank>设备通过扫描二维码，识别条码的二进制数据并可获取其中所包含的信息。</a><br>';
   
9. marqueeContent[2]='<font color="#ff0000">温馨提示： </font><a href="/" target=_blank>手机二维码可以印刷在报纸、杂志、图书及个人名片等多种载体上，用户通过手机摄像头扫描二维码</a><br>';
   
10. marqueeContent[3]='<font color="#ff0000">温馨提示： </font><a href="/" target=_blank>手机二维码扫描软件：比较知名的应用有条码扫描器、快拍、酷拍、我查查等。彩色二维码生成器,二维码生成器。</a><br>';
    
11. var marqueeInterval=new Array();  //定义一些常用而且要经常用到的变量
    
12. var marqueeId=0;
    
13. var marqueeDelay=5000;
    
14. var marqueeHeight=18;
    
15. //接下来的是定义一些要使用到的函数
    
16. function initMarquee() {
    
17.     var str=marqueeContent[0];
    
18.     document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>');
    
19.     marqueeId++;
    
20.     marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
    
21.     }
    
22. function startMarquee() {
    
23.     var str=marqueeContent[marqueeId];
    
24.         marqueeId++;
    
25.     if(marqueeId>=marqueeContent.length) marqueeId=0;
    
26.     if(marqueeBox.childNodes.length==1) {
    
27.         var nextLine=document.createElement('DIV');
    
28.         nextLine.innerHTML=str;
    
29.         marqueeBox.appendChild(nextLine);
    
30.         }
    
31.     else {
    
32.         marqueeBox.childNodes[0].innerHTML=str;
    
33.         marqueeBox.appendChild(marqueeBox.childNodes[0]);
    
34.         marqueeBox.scrollTop=0;
    
35.         }
    
36.     clearInterval(marqueeInterval[1]);
    
37.     marqueeInterval[1]=setInterval("scrollMarquee()",18);
    
38.     }
    
39. function scrollMarquee() {
    
40.     marqueeBox.scrollTop++;
    
41.     if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
    
42.         clearInterval(marqueeInterval[1]);
    
43.         }
    
44.     }
    
45. initMarquee();
    
46. </script>
    
47. </div>
    
48. 
    
49. 
    
50. 
    
51. 
    
52. 
    
53. 
    
54. 
    
55. 
    
56. 
    

复制代码