zoukankan      html  css  js  c++  java
  • 图片轮播代码

    <!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>
  • 相关阅读:
    Educational CF # 17 C 二分,字符串 D 最长路,dp
    HDU-1878 判断无向图欧拉回路,水
    LightOJ-1094 求树直径,水
    POJ-1144 Tarjan求割点,双连通模板题
    HDU-1269 Tarjan求强连通分量,模板题
    POJ-1094 拓扑排序
    POJ-1847 最短路裸题,Floyd, Bellman, Dijkstra, Spfa
    LightOJ-1005 组合数学,组合数水题
    CF #392(2) C 暴力模拟
    Android xUtils3使用
  • 原文地址:https://www.cnblogs.com/shark1100913/p/5407167.html
Copyright © 2011-2022 走看看