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">可以使用<,也可以去找图片</a> 47 <a href="#" id="rightBtn">可以使用>,也可以去找图片</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>
转载于:https://www.cnblogs.com/zhangsiyuan/p/7722880.html