大图轮播

  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>