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=""><</a>
122 <a id="next" href="">></a>
123 <p id="num">图片正在加载~~</p> <!-- 1/4 -->
124 <span id="text">请稍后~~</span>
125 <img id="img" />
126 </div>
127 </body>
128 </html>
