轮播图第一步：操作数组、元素的属性 
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>第一步:操作属性之数组(简单的轮播图)</title>
  6     <style type="text/css">
  7         *{
  8             margin: 0;
  9             padding:0;
 10         }
 11         html,body{
 12             height: 100%;   /*是让html的直接子元素随着屏幕高度自适应*/
 13             width: 100%;
 14         }
 15         #content{
 16             height: 100%;
 17             width: 100%;
 18             position:relative;  /*因为content是所有标签的父级元素，所有的元素相对于
 19                                   content设置绝对定位*/
 20         }
 21         #content a{
 22             width:35px;
 23             height:50px;
 24             background-color: #999999;
 25             position:absolute;
 26             top:45%;
 27             text-decoration:none;
 28             line-height:50px;
 29             font-size:30px;
 30             font-weight:bold;
 31             color: #302f33;
 32             text-align:center;
 33             display:none;
 34         }
 35         #content:hover a{
 36             display:block;
 37             filter:alpha(opacity:50);   /*IE的透明度设置*/
 38             opacity:0.5;    /*非IE的透明度设置*/
 39         }
 40         #prev{
 41             left:10px;
 42         }
 43         #next{
 44             right:10px;
 45         }
 46         #img1{
 47             height: 100%;
 48             width: 100%;
 49         }
 50         #text{
 51             width:100%;
 52             background-color: #d1d1d1;
 53             text-align:center;
 54             font-family:'微软雅黑';
 55             position:absolute;
 56             bottom:10px;
 57             filter:alpha(opacity:50);   /*IE的透明度设置*/
 58             opacity:0.5;    /*非IE的透明度设置*/
 59         }
 60         #span1{
 61             width:100%;
 62             background-color: #d1d1d1;
 63             text-align:center;
 64             font-family:'微软雅黑';
 65             position:absolute;
 66             top:10px;
 67             filter:alpha(opacity:50);   /*IE的透明度设置*/
 68             opacity:0.5;    /*非IE的透明度设置*/
 69         }
 70     </style>
 71 </head>
 72 <body>
 73 <div id="content">   <!--放图片、按钮、文字等的div-->
 74     <a href="#" id="prev"><</a>
 75     <a href="#" id="next">></a>
 76     <p id="text">这是第一张图片</p>
 77     <span id="span1">1/5</span>
 78     <img alt="#" id="img1">
 79 </div>
 80 <script type="text/javascript">
 81     var oPrev = document.getElementById("prev");
 82     var oNext = document.getElementById("next");
 83     var oText = document.getElementById("text");
 84     var oSpan = document.getElementById("span1");
 85     var oImg = document.getElementById("img1");
 86     var arrUrl = ['../images/01.jpg','../images/02.jpg','../images/03.jpg','../images/06.jpg','../images/07.jpg'];
 87     var arrText  = ['这是第一张图片','这是第二张图片','这是第三张图片','这是第四张图片','这是第五张图片'];
 88     var num = 0;
 89     oSpan.innerHTML = num+1+'/'+arrUrl.length;
 90     oText.innerHTML = arrText[num];
 91     oImg.src = arrUrl[num];
 92     oNext.onclick = function(){
 93         num ++;
 94         if(num == arrUrl.length){
 95             num = 0;
 96         }
 97         oSpan.innerHTML = num+1+'/'+arrUrl.length;
 98         oText.innerHTML = arrText[num];
 99         oImg.src = arrUrl[num];
100     };
101     oPrev.onclick = function(){
102         num --;
103         if(num < 0){
104             num = arrUrl.length-1;
105         }
106         oSpan.innerHTML = num+1+'/'+arrUrl.length;
107         oText.innerHTML = arrText[num];
108         oImg.src = arrUrl[num];
109     };
110 </script>
111 </body>
112 </html>

 

posted on 2016-05-28 11:30  冬刻忆  阅读(111)  评论(0)    收藏  举报