这里是前几天做的一个文字轮播效果图，分为两块，第一块就是单纯的文字轮播效果，鼠标划过会停止，鼠标移开会继续。第二块是一个延迟的 文字轮播效果，就是每隔一段时间，会播一次。因为第一块里面已经做了鼠标悬停事件，所以在第二块里面就不再做了。这大概算是我的第一篇小白文了吧，写的不好，哈哈，也欢迎各位看到我代码的小伙伴能够给出意见，或者对我代码里面有疑惑的地方也可以指出。
<!DOCTYPE html> <html> <head> <title>文字向上滚动</title> <meta cjarset="UTF-8" /> <style> ul,li,h2{ margin: 0; padding: 0; } #div1{ width: 200px; margin: 100px auto; border: 1px solid #f00; } #div2{ height: 150px; width: 200px; background: green; overflow: hidden; } h2{ background:#f0f; } h2,li{ text-align: center; } li{ list-style-type:none; } </style> </head> <body> <div id="div1"> <h2>英雄简介</h2> <div id="div2"> <ul> <li>酒桶</li> <li>阿卡里</li> <li>虚空行者</li> <li>末日使者</li> <li>圣枪游侠</li> <li>亚索</li> <li>死哥</li> <li>德玛西亚</li> <li>茂凯</li> <li>莫甘娜</li> <li>小炮</li> </ul> </div> </div> <script> var div2=document.getElementById("div2"); div2.innerHTML+=div2.innerHTML; var lis=document.getElementsByTagName("li"), time, speed=50; div2.scrollTop=0; function move(){ div2.scrollTop++; if(div2.scrollTop>=div2.scrollHeight/2){ div2.scrollTop=0; } } time=setInterval("move()",speed) for(var i=0;i<lis.length;i++){ lis[i].οnmοuseοver=function(){ this.style.background="#567"; clearInterval(time); } lis[i].οnmοuseοut=function(){ this.style.background="green"; time=setInterval("move()",speed) } } </script> </body> </html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------我是分割线
<!DOCTYPE html> <html> <head> <title>文字向上滚动</title> <meta cjarset="UTF-8" /> <style> ul,li,h2{ margin: 0; padding: 0; } #div1{ width: 200px; margin: 100px auto; border: 1px solid #f00; } #div2{ height: 150px; width: 200px; background: green; overflow: hidden; } h2{ background:#f0f; } h2,li{ text-align: center; } li{ list-style-type:none; line-height: 24px; } </style> </head> <body> <div id="div1"> <h2>英雄简介</h2> <div id="div2"> <ul> <li>酒桶</li> <li>阿卡里</li> <li>虚空行者</li> <li>末日使者</li> <li>圣枪游侠</li> <li>亚索</li> <li>死哥</li> <li>德玛西亚</li> <li>茂凯</li> <li>莫甘娜</li> <li>小炮</li> </ul> </div> </div> <script> var div2=document.getElementById("div2"); div2.innerHTML+=div2.innerHTML; var time, speed=50, delay=1000, liHeight=24; div2.scrollTop=0; function movego(){ div2.scrollTop++; time=setInterval("move()",speed); } function move(){ if(div2.scrollTop%liHeight==0){ clearInterval(time); setTimeout("movego()",delay); }else{ div2.scrollTop++; if(div2.scrollTop>=div2.scrollHeight/2){ div2.scrollTop=0; } } } time=setInterval("move()",speed); </script> </body> </html>
