图片轮播起

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>轮播器</title>
  6 <style>
  7 div{
  8  width:300px;
  9  height: 450px;
 10  margin: 100px auto ;
 11  border: 10px solid #E6E6E6;
 12  position: relative;　　　　　　//div绝对定位  相当于浏览器？
 13  background: #E2EAED;
 14 }
 15  img{
 16   width: 300px;
 17   height: 450px;
 18  }
 19  a{
 20   width: 50px;
 21   height: 50px;
 22   text-decoration: none;
 23   font-size: 30px;
 24   font-weight: blod; 
 25   font-family: "微软雅黑";
 26   color: white;
 27   border: 5px solid white;
 28   background: black;
 29   position: absolute;　　　　//相当定位   跟父类div    这样可以设置a位于div上面
 30  }
 31  #pre{
 32   
 33   top:195px;　　//相对div195px
 34   left: -60px;
 35  }
 36  #next{
 37   top:195px;
 38   right: -60px;
 39  }
 40  p{
 41   position: absolute;
 42   background: black;
 43   color: white;
 44   font-size: 30px;
 45   width: 300px;
 46   text-align: center;
 47   margin: 0;
 48   filter:alpha(opacity=70);　　　　//设置透明度
 49   -moz-opacity:0.7;
 50   -khtml-opacity: 0.7;
 51   opacity: 0.7; 
 52  }
 53  span{
 54   position: absolute;
 55   background: black;
 56   color: white;
 57   font-size: 30px;
 58   width: 300px;
 59   text-align: center;
 60   bottom: 0px;
 61   margin: 0;
 62   filter:alpha(opacity=70);　　//　　设置透明度
 63   -moz-opacity:0.7;
 64   -khtml-opacity: 0.7;
 65   opacity: 0.7; 
 66  }
 67  img:hover{　　　　　　　　　　//鼠标放上去图片旋转
 68   transition-duration: 1s;   //延时过渡   //要与delay区分
 69   -moz-transition-duration: 1s; /* Firefox 4 */
 70   -webkit-transition-duration: 1s; /* Safari 和 Chrome */
 71   -moz-transform:rotate(360deg) scale(1.5); -webkit-transform:rotate(360deg) scale(1.5);    //旋转角度   跟图片变化大小
 72  }
 73 </style>
 74 <script>
 75  window.onload = function(){
 76   var oDiv = document.getElementById('div1');
 77   var oPre = document.getElementById('pre');
 78   var oNext = document.getElementById('next');
 79   var oNum = document.getElementById('num');
 80   var oText = document.getElementById('text');
 81   var oImg = document.getElementById('img');
 82 
 83   var arrTop = ['美女mm','青春记忆','可爱动人','清纯可爱'];
 84   var arrImg = ['01.JPG','02.JPG','03.JPG','04.JPG'];
 85   var num = 0;
 86   //初始化
 87   function change(){
 88    oNum.innerHTML = num+1+'/'+arrTop.length;
 89    oImg.src = arrImg[num];
 90    oText.innerHTML = arrTop[num];
 91   }
 92   change();
 93 
 94   oPre.onmouseover = function(){　　　　　　//要是改为　　oPre.onclick　　不成功？？？
 95    num --;
 96    if (num<0) {
 97     num = 3;
 98     change();
 99    }else{
100     change();
101    }
102   };
103 
104 
105   oNext.onmouseover = function(){
106    num ++;
107    if (num>3) {
108     num = 0;
109     change();
110    }else{
111     change();
112    }
113   };
114 
115  };
116 </script>
117 </head>
118  
119 <body>
120     <div id="div1">
121     <a id="pre" href="">&lt;</a>
122     <a id="next" href="">&gt;</a>
123     <p id="num">图片正在加载~~</p>    <!-- 1/4 -->
124     <span id="text">请稍后~~</span>
125      <img id="img" />
126     </div>
127 </body>
128 </html>
posted @ 2015-01-05 11:17 人间最美二月天阅读(196) 评论(0) 收藏举报
人间最美二月天

图片轮播起

公告
