这个很简单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding:0;margin:0;} div{ width:200px; height:20px; position:relative; margin:80px; overflow:hidden; /*border:1px solid red;*/ } ul{ position:absolute; left:0; width:50px; font-size:0; } li{list-style: none;font-size:16px;height:20px;width:200px;float:left;} </style> </head> <body> <div> <ul id='ul'> <li style='background:red;'>第一个</li> <li style='background:yellow;'>第二个</li> <li style='background:pink;'>第三个</li> <li style='background:green;'>第四个</li> <li style='background:blue;'>第五个</li> <li style='background:red;'>第一个</li> <li style='background:yellow;'>第二个</li> <li style='background:pink;'>第三个</li> <li style='background:green;'>第四个</li> <li style='background:blue;'>第五个</li> </ul> </div> <script> /* 无缝向上滚动小广告（原生） */ var num = 0; var Time; var ul = document.getElementById('ul'); var li = ul.getElementsByTagName('li');//获取li 的集合 var liHeight = li[0].offsetHeight;//获取li的高度 var t = setInterval(rem,30); function rem(){ ul.style.top = '-'+num +'px'; num++; if(num == liHeight){ clearInterval(t); num = 0; ul.style.top = num + 'px'; ul.appendChild(li[0]); Time = setTimeout(tt,1000); } } function tt(){ t = setInterval(rem,30); clearTimeout(Time); } </script> </body> </html>