css+js制作简便手风琴

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Title</title>
 6 <style>
 7 *{
 8 margin:0px;
 9 padding:0;
10 }
11 #qiehuan{
12 width:520px;
13 height:280px;
14 margin:150px auto;
15 position: relative;
16 }
17 #qiehuan ul li{
18 list-style: none;
19 position: absolute;
20 }
21 #leftBtn{
22 display: block;
23 background: url("../img/btn.png");
24 width:48px;
25 height:60px;
26 position: absolute;
27 top:110px;
28 left:1px;
29 z-index: 9999;
30 }
31 #rightBtn{
32 display: block;
33 background: url("../img/btn.png");
34 width:48px;
35 height: 60px;
36 background-position: -48px 0px;
37 position: absolute;
38 top:110px;
39 right:1px;
40 z-index: 9999;
41 }
42 </style>
43 </head>
44 <body>
45 <div id="qiehuan">
46 <a href="#" id="leftBtn">可以使用&lt,也可以去找图片</a>
47 <a href="#" id="rightBtn">可以使用&gt,也可以去找图片</a>
48 <ul>
49 
50 <!--可以找五张同样宽和高的图片-->
51 <li><img src="../img/11.jpg" alt=""></li>
52 <li><img src="../img/12.jpg" alt=""></li>
53 <li><img src="../img/13.jpg" alt=""></li>
54 <li><img src="../img/14.jpg" alt=""></li>
55 <li><img src="../img/15.jpg" alt=""></li>
56 </ul>
57 </div>
58 
59 <script type="text/javascript">
60 var i = 4;//控制下标变量
61 var index = 1;//控制 li的zIndex值
62 var list = document.getElementsByTagName("li");
63 function $(id) {
64 return document.getElementById(id);
65 }
66 $("rightBtn").onclick = (function () {
67 i++;
68 if(i == list.length){
69 i=0;
70 }
71 list[i].style.zIndex=++index;
72 });
73 $("leftBtn").onclick = (function () {
74 i--;
75 if(i == -1){
76 i=4;
77 }
78 list[i].style.zIndex=++index;
79 });
80 </script>
81 </body>
82 </html>