1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{margin:0;padding:0;} 8 #hd{width:250px;height:30px;background:gold;position:relative;overflow:hidden;} 9 #hd ul{position:absolute;top:0;left:0;} 10 #hd ul li{list-style:none;line-height:30px;height:30px;width:250px;} 11 </style> 12 <script src="js/jquery.1.9.1.js" type="text/javascript" charset="utf-8"></script> 13 <script type="text/javascript"> 14 $(function(){ 15 //大总管变量 16 var c=0; 17 setInterval(function(){ 18 c++; 19 if(c==5){ 20 //让ul做一个瞬间变化 21 $("#hd ul").css({'top':'0'}); 22 c=1; 23 } 24 //计算ul应该到达的top值 25 var t=c*-30; 26 //让Ul滑动上去 27 $("#hd ul").animate({"top":t+"px"},500); 28 },1000) 29 }) 30 </script> 31 </head> 32 <body> 33 <div id="hd"> 34 <ul> 35 <li style="background:gold;">梦入江南烟水路，</li> 36 <li style="background:green;">行尽江南，不与离人遇。</li> 37 <li style="background:blue;">睡里消魂无说处，觉来惆怅消魂误。</li> 38 <li style="background:red;">歌筵畔，先安簟枕，容我醉时眠。</li> 39 <li style="background:gold;">梦入江南烟水路，</li> 40 </ul> 41 </div> 42 </body> 43 </html>
效果图：
