图片的轮转 - 深天啦啦

效果：
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>图片的轮转</title>
 5     <meta charset="utf-8">
 6     <style>
 7        *{padding: 0px; margin: 0px;}
 8        #banner{width: 800px; height: 360px; border: 1px solid red; margin: 50px auto 10px;
 9        position: relative;}
10        #banner a{text-decoration: none; width: 30px; height:40px; background: gray;
11        display: block; font-size:14px; font-weight: bold; text-align: center;
12        line-height:40px; position: absolute; absolute; top:50%; margin-top: -20px;}
13        #left{left:-40px;}
14        #right{right:-40px;}
15        #list{width:100px;height: 12px; position:absolute; 
16              left:  50%;margin-left:-50px;bottom: 10px; cursor:pointer;}
17        #list li{width: 12px;height:12px;backgroundL red;list-style:none;
18               border-radius:50%;float: left;margin-left: 5px; background: #e5e5e5;}
19        p{text-align: center;}
20     </style>
21   </head>
22   
23   <body>
24         <div id="banner">
25            <img id= "img"  src="image/1.jpg"  width="800px;" height="360px";/>
26            <a href="javascript:void(0)" id="left">&lt;</a>
27            <a href="javascript:void(0)" id="right">&gt;</a>
28            <ul id="list">
29               <li style="background: green;"></li>
30               <li></li>
31               <li></li>
32               <li></li>
33               <li></li>
34            </ul>
35         </div>
36         <p>第<span id="ospan">1</span>张</p>
37         <script>
38           window.onload=function(){
39              var oright=$("right");
40              var oimg=$("img");
41              var oleft=$("left"); 
42              var Ospan=$("ospan");
43              var Olist=$("list");
44              var Oli=Olist.getElementsByTagName("li");
45              var num=1;
46              oright.onclick=function(){
47                 num++;
48                 if(num>5) num=1; 
49                 oimg.src="image/"+ num +".jpg";
50                 Ospan.innerHTML=num;
51                for(var j=0;j<Oli.length;j++){
52                 if(num-1==j){
53                   Oli[j].style.background="green";
54                 }else{
55                   Oli[j].style.background="#e5e5e5";
56                 }
57                 }
58              }
59              oleft.onclick=function(){
60                 num--;
61                 if(num<1) num=5; 
62                 oimg.src="image/"+ num +".jpg";
63                 Ospan.innerHTML=num;
64                 for(var j=0;j<Oli.length;j++){
65                 if(num-1==j){
66                   Oli[j].style.background="green";
67                 }else{
68                   Oli[j].style.background="#e5e5e5";
69                 }
70                 }
71              }
72             for (var i=0;i<Oli.length;i++){
73               Oli[i].index=i;
74               Oli[i].onclick=function(){
75                 oimg.src="image/" + (this.index+1) + ".jpg";//this指Oli这个对象
76                 Ospan.innerHTML=this.index+1;
77                 for(var j=0;j<Oli.length;j++){
78                 if(this.index==j){
79                   Oli[j].style.background="green";
80                 }else{
81                   Oli[j].style.background="#e5e5e5";
82                 }
83                 }
84               }
85             }
86              
87           }
88           function $(a){
89           
90              return document.getElementById(a);
91           }
92         </script>
93 
94   </body>
95 </html>
posted on 2016-06-21 22:46 深天啦啦阅读(83) 评论(0) 收藏举报