• 图片轮播代码


    <!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>
  • 相关阅读:
    Typecho
    iOS开发
    搭建自己的Git服务器
    Markdown
    微信使用篇
    bzoj2406 矩阵
    POI2010 Bridges
    上下界网络流总结
    TopCoder SRM 582 Div 1
    port命令记录
  • 原文地址:https://www.cnblogs.com/shark1100913/p/5407167.html
Copyright © 2020-2023  润新知