轮播图片

<style type="text/css">
  *{
  margin:auto;
  padding:0px;}
  #datu{
  width:600px;
  height:400px;}
  .tu{
  display:none;}
  #kuang{
  width:600px;
  height:20px;
  z-index:1;
  position:absolute;
  top:385px;
  left:385px;}
  .dian{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid #F00;
  float:left;}
  </style>
  </head>
   
  <body>
  <div id="datu">
  <img class="tu" src="../QQ截图20171008192118.png" width="600px" height="400px" style="display:block;" />
  <img class="tu" src="../onmyoji-003.jpg" width="600px" height="400px" />
  <img class="tu" src="../壁纸.png" width="600px" height="400px" />
  </div>
   
  <div id="kuang">
  <div class="dian" x="0" style="background-color:blue;"></div>
  <div class="dian" x="1"></div>
  <div class="dian" x="2"></div>
  </div>
  </body>
  </html>
  <script type="text/javascript">
  window.setInterval("Tu()",1000)
  var x =0;
  function Tu()
  {
  var t =document.getElementsByClassName("tu");
  x++;
  if(x>=t.length)
  {
  x=0;
  }
  for(var i=0;i<t.length;i++)
  {
  t[i].style.display="none";
  }
   
  t[x].style.display="block";
   
  var d =document.getElementsByClassName("dian");
  for(var j=0;j<d.length;j++)
  {
  if(d[j].getAttribute("x")==x)
  {
  d[j].style.backgroundColor="blue";
  }
  else
  {
  d[j].style.backgroundColor="red"
  }
  }
  } 

 

posted @ 2018-04-08 10:05  k丶灵  阅读(154)  评论(0)    收藏  举报