2017.12.5

来源：互联网发布：php post接口开发编辑：程序博客网时间：2024/06/06 05:58

<!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=gb2312" />
<title>轮播</title>
<style>
    #wrap{
   margin:0;
   position:relative;
   height:100vmin;
   width:100vw;
   background:#33FFCC;
   }
   #wrapout{
   position:absolute;
   width:700px;
   height:300px;
   left:600px;
   top:650px;
   background:#FFFFFF;
   }
   #slider{
   position:inherit;
   width:700px;
   height:300px;
   }
   img{
   opacity:0;
   position:inherit;
   }
   #item{
   width:690px;
   height:30px;
   position:inherit;
   bottom:0px;
   text-align:right;
   }
   span{
   width:30px;
   height:15px;
   margin:0px;
   display:inline-block;
   background:#ccc;
   }
   span:hover{
   cursor:pointer;
   }
   </style>
</head>

<body>
    <div id="wrap">
       <div id="wrapout">
            <div id="slider">
            <img src="img/1.png" height="300" width="700" alt="冒险岛" />
           <img src="img/2.png" height="300" width="700" alt="冒险岛" />
           <img src="img/3.png" height="300" width="700" alt="冒险岛" />
           </div>
           <div id="item">
           <span></span>
           <span></span>
           <span></span>
           </div>
       </div>
   </div>
<script>
      var j = 0;
      var timer = null;
      onload = handSlide();
      slide();

      function handSlide(){
          var spans = document.getElementsByTagName("span");
          var imgs = document.getElementsByTagName("img");
          spans[0].onmouseover = function(){
                                              for(var index=0;index<spans.length;index++)
                                              { spans[index].style.background = "#ccc";
                                                imgs[index].style.opacity = 0; }
                                              spans[0].style.background = "#FFA500";
                                              imgs[0].style.opacity = 1;
                                              }
          spans[1].onmouseover = function(){
                                              for(var index=0;index<spans.length;index++)
                                              { spans[index].style.background = "#ccc";
                                                imgs[index].style.opacity = 0; }
                                              spans[1].style.background = "#FFA500";
                                              imgs[1].style.opacity = 1;
                                              }
          spans[2].onmouseover = function(){
                                              for(var index=0;index<spans.length;index++)
                                              { spans[index].style.background = "#ccc";
                                                imgs[index].style.opacity = 0; }
                                              spans[2].style.background = "#FFA500";
                                              imgs[2].style.opacity = 1;
                                              }
          wrapout.onmouseover = function(){ clearInterval(timer); }
          wrapout.onmouseout = function(){ timer = setInterval("changeImg()",3000); }
          /*for(var num = 0;num<3;num++){
              var span = document.getElementsByTagName("span")[num];
              span.onmouseover = function(){ span.style.background = "red"; }
              span.onmouseout = function(){ span.style.background = "#ccc"; }
              }*/
      }
      function slide(){
         changeImg();
         timer = setInterval("changeImg()",3000);
      }
      function changeImg(){
          var i,s;
          for(var k = 0;k<3;k++){      //清除之前的打开的透明值
              i = document.getElementsByTagName("img")[k];
              s = document.getElementsByTagName("span")[k];
              i.style.opacity = 0;
              s.style.background = "#ccc";
              }
          j %= 3;
          i = document.getElementsByTagName("img")[j];
          s = document.getElementsByTagName("span")[j];
          i.style.opacity = 1;
          s.style.background = "#FFA500";
          j++;
      }
      </script>
</body>
</html>

阅读全文

0 0