用来理解轮播图的操作原理
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 /*轮播图效果*/ 8 .carouselbox{ 9 position: relative; 10 height: 600px; 11 } 12 .carousel div{ 13 width: 100%; 14 height:600px; 15 } 16 .carousel{ 17 height: 600px; 18 overflow: hidden; 19 position: relative; 20 } 21 .carousel div:first-child{ 22 background: url("./1.jpg") no-repeat; 23 background-size:100% 100%; 24 } 25 .carousel div:last-child{ 26 background: url("./2.jpg") no-repeat; 27 background-size:100% 100%; 28 } 29 30 #left{ 31 position: absolute; 32 top:50%; 33 left: 2%; 34 /*background: transparent;*/ 35 opacity:.3; 36 } 37 #left:hover,#right:hover{ 38 opacity:.8; 39 } 40 #right{ 41 position: absolute; 42 top:50%; 43 right:2%; 44 opacity:.3; 45 } 46 47 </style> 48 </head> 49 <body> 50 <div class="carouselbox"> 51 <div class="carousel" id="carousel"> 52 <div class=""></div> 53 <div class=""></div> 54 </div> 55 <span id="left"> 56 <img src="./1.jpg" alt=""> 57 </span> 58 <span id="right"> 59 <img src="./1.jpg" alt=""> 60 </span> 61 </div> 62 63 <script> 64 var carsouel=document.getElementById("carousel"); 65 var list = carousel.children; 66 67 var left = document.getElementById("left"); 68 var right = document.getElementById("right"); 69 left.style.marginTop=-left.offsetHeight/2 + "px"; 70 right.style.marginTop=-right.offsetHeight/2 + "px"; 71 var height = carousel.offsetHeight; 72 // (list.length-1)*height; 73 left.onclick=function(){ 74 var currentheight = list[0].offsetTop; 75 if (Math.abs(currentheight) >= (list.length-1)*height){ 76 list[0].style.marginTop = 0+"px"; 77 }else{ 78 list[0].style.marginTop=(currentheight - height) + "px"; 79 } 80 } 81 82 right.onclick=function(){ 83 var currentheight = list[0].offsetTop; 84 if (currentheight >= 0){ 85 list[0].style.marginTop =-(list.length-1)*height +"px"; 86 }else{ 87 list[0].style.marginTop=(currentheight + height) + "px"; 88 } 89 } 90 91 </script> 92 </body> 93 </html>