图片轮播代码 

<!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>

 

posted @ 2016-04-19 10:26  怪咖咖  阅读(189)  评论(0)    收藏  举报