标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1 {position:relative;width:800px;height:210px;overflow:hidden; } #div2{position:absolute;} li{float:left;list-style-type:none;padding:5px;} img{border:none;} a{position:relative;} </style> <script> window.onload=function() { var odiv2=document.getElementById(‘div2‘); var ali=odiv2.getElementsByTagName(‘li‘); var aspeed=-5; odiv2.innerHTML+=odiv2.innerHTML; odiv2.style.width=ali[0].offsetWidth*ali.length+‘px‘; setInterval(function() { odiv2.style.left=odiv2.offsetLeft+aspeed+‘px‘; if (odiv2.offsetLeft<-odiv2.offsetWidth/2) { odiv2.style.left=‘0px‘; } },50);};//数字越大播放速度越慢 </script> </head> <body> <div id=‘div1‘> <div id=‘div2‘> <li><a href=""><img src="0410htmltext/img/lunbo1.png" /></a></li> <li><a href=""><img src="0410htmltext/img/lunbo2.png" /></a></li> <li><a href=""><img src="0410htmltext/img/lunbo3.jpeg" /></a></li> <li><a href=""><img src="0410htmltext/img/lunbo4.jpeg" /></a></li> <li><a href=""><img src="0410htmltext/img/lunbo5.png" /></a></li> <li><a href=""><img src="0410htmltext/img/lunbo6.jpeg" /></a></li> <!--这边你可以添加任意多的li，也就是你可以添加任意多的图片，使任意多的图片轮播--> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/shark1100913/p/5407167.html
