1 <head> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4 <title>大图轮播</title> 5 <style type="text/css"> 6 * { 7 margin: 0px; 8 padding: 0px; 9 } 10 11 #container { 12 width: 500px; 13 height: 300px; 14 /*border: 1px solid black;*/ 15 position: relative; 16 overflow: hidden; 17 } 18 19 .btn { 20 height: 100%; 21 width: 30px; 22 /*border: 1px solid red;*/ 23 position: absolute; 24 text-align: center; 25 line-height: 300px; 26 font-size: 40px; 27 font-weight: 900; 28 color: black; 29 opacity: 0.3; 30 transition: 0.6s; 31 z-index: 999; 32 background-color: white; 33 } 34 35 .btn:hover { 36 cursor: pointer; 37 opacity: 0.8; 38 } 39 40 #left-btn { 41 left: 0px; 42 top: 0px; 43 } 44 45 #right-btn { 46 right: 0px; 47 top: 0px; 48 } 49 50 #ad-container { 51 width: 2500px; 52 height: 300px; 53 /*border: 1px solid blue;*/ 54 position: relative; 55 } 56 57 .ad { 58 width: 500px; 59 height: 300px; 60 float: left; 61 text-align: center; 62 line-height: 300px; 63 font-size: 100px; 64 font-family: "微软雅黑"; 65 } 66 </style> 67 </head> 68 69 <body> 70 <div id="container"> 71 <div id="left-btn" class="btn"> 72 <</div> 73 <div id="right-btn" class="btn">></div> 74 <div id="ad-container"> 75 <div class="ad" style="background-color: mediumpurple;">1</div> 76 <div class="ad" style="background-color: yellowgreen;">2</div> 77 <div class="ad" style="background-color: rosybrown;">3</div> 78 <div class="ad" style="background-color: salmon;">4</div> 79 <div class="ad" style="background-color: cyan;">5</div> 80 </div> 81 </div> 82 </body> 83 84 </html> 85 <script type="text/javascript"> 86 var rightBtn = document.getElementById("right-btn"); 87 var leftBtn = document.getElementById("left-btn"); 88 var n = 1; 89 /* var count = 1*/; 90 var arr = new Array(); 91 /* var m=1; 92 */ rightBtn.onclick = function() { 93 var x = window.setInterval("to_right()", 20); 94 arr.push(x); 95 } 96 97 function clear() { 98 for(var i in arr) { 99 window.clearInterval(arr[i]); 100 } 101 } 102 103 function to_right() { 104 105 var adContainer = document.getElementById("ad-container"); 106 if(n == 5) { 107 clear(); 108 } else if(adContainer.offsetLeft != n * (-500)) { 109 adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px"; 110 } else { 111 n++; 112 clear(); 113 } 114 } 115 var arr1 = new Array(); 116 117 leftBtn.onclick = function() { 118 var y = window.setInterval("to_left()", 20); 119 arr1.push(y); 120 } 121 122 function clear2() { 123 for(var y in arr1) { 124 window.clearInterval(arr1[y]); 125 } 126 } 127 128 function to_left() { 129 130 var adContainer = document.getElementById("ad-container"); 131 if(n == 1) { 132 clear2(); 133 } else if(adContainer.offsetLeft != (n-2) * (-500)) { 134 adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px"; 135 } else { 136 n--; 137 clear2(); 138 } 139 } 140 141 142 </script>