标签：
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>
标签：
原文地址：http://www.cnblogs.com/zzg521/p/4203093.html
