1.效果图
不间断滚动。
2.css代码
#wrapper{ border-top: 3px solid #EB782E; width: 1200px; margin: 0 auto; margin-top: 30px; position: relative; } #wrapper .over{width: 1200px;height: 100px;overflow: hidden;position: relative;} .hmBom_nm { color: #FFF; background: #eb782e; position: absolute; left: 0px; top: -15px; line-height: 27px; height: 27px; width: 160px; font-size: 12px; font-weight: bold; text-align: center; display: inline-block; padding: 0px 18px; border-radius: 1.6em; text-transform: uppercase; } #wrapper ul { position: absolute; left: 0; top: 10px; } #wrapper li{ text-align: center; float: left; width: 120px; margin-right: 40px; list-style: none; } #wrapper li img{ width: 120px; height: 40px; }3.js代码 window.οnlοad=function(){ var timer=null; var speed=-2; var od=document.getElementById("wrapper"); var au=od.getElementsByTagName('ul')[0]; var ali=au.getElementsByTagName('li'); au.innerHTML=au.innerHTML+au.innerHTML; au.style.width=(ali[0].offsetWidth+40)*ali.length+'px'; timer=setInterval(move,30) function move(){ if(au.offsetLeft<-au.offsetWidth/2){ au.style.left='0'; } if(au.offsetLeft>0){ au.style.left=-au.offsetWidth/2+'px'; } au.style.left=au.offsetLeft+speed+'px'; } od.οnmοuseοver=function(){ clearInterval(timer); } od.οnmοuseοut=function(){ timer=setInterval(move,30) } }3.html代码 <div id="wrapper" > <div class="hmBom_nm">合作伙伴partner</div> <div class="over"> <ul> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> <li> <img src="1.jpg"/> <p>1</p> </li> </ul> </div> </div>