原生js轮播图实现

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6         <style type="text/css">
  7     * {
  8         padding: 0;
  9         margin: 0;
 10         list-style: none;
 11         border: 0;
 12     }
 13 
 14     .all {
 15         width: 500px;
 16         height: 200px;
 17         padding: 7px;
 18         border: 1px solid #ccc;
 19         margin: 100px auto;
 20         position: relative;
 21     }
 22 
 23     .screen {
 24         width: 500px;
 25         height: 200px;
 26         overflow: hidden;
 27         position: relative;
 28     }
 29 
 30     .screen li {
 31         width: 500px;
 32         height: 200px;
 33         overflow: hidden;
 34         float: left;
 35     }
 36 
 37     .screen ul {
 38         position: absolute;
 39         left: 0;
 40         top: 0px;
 41         width: 3000px;
 42     }
 43 
 44     .all ol {
 45         position: absolute;
 46         right: 10px;
 47         bottom: 10px;
 48         line-height: 20px;
 49         text-align: center;
 50     }
 51 
 52     .all ol li {
 53         float: left;
 54         width: 20px;
 55         height: 20px;
 56         background: #fff;
 57         border: 1px solid #ccc;
 58         margin-left: 10px;
 59         cursor: pointer;
 60     }
 61 
 62     .all ol li.current {
 63         background: yellow;
 64     }
 65 
 66     #arr {
 67         display: none;
 68     }
 69 
 70     #arr span {
 71         width: 40px;
 72         height: 40px;
 73         position: absolute;
 74         left: 5px;
 75         top: 50%;
 76         margin-top: -20px;
 77         background: #000;
 78         cursor: pointer;
 79         line-height: 40px;
 80         text-align: center;
 81         font-weight: bold;
 82         font-family: '黑体';
 83         font-size: 30px;
 84         color: #fff;
 85         opacity: 0.3;
 86         border: 1px solid #fff;
 87     }
 88 
 89     #arr #right {
 90         right: 5px;
 91         left: auto;
 92     }
 93     </style>
 94 </head>
 95 <body>
 96     <div class="all" id='all'>
 97     <div class="screen" id="screen">
 98         <ul id="ul">
 99             <li><img src="images/carousel/1.jpg" width="500" height="200" /></li>
100             <li><img src="images/carousel/2.jpg" width="500" height="200" /></li>
101             <li><img src="images/carousel/3.jpg" width="500" height="200" /></li>
102             <li><img src="images/carousel/4.jpg" width="500" height="200" /></li>
103             <li><img src="images/carousel/5.jpg" width="500" height="200" /></li>
104         </ul>
105         <ol>
106         </ol>
107         <div id="arr">
108             <span id="left"><</span>
109             <span id="right">></span>
110         </div>
111     </div>
112 </div>
113 
114 <script>
115     //1.获取事件源
116     var all = document.getElementById("all");
117     var screen = all.firstElementChild || all.firstChild;
118     var imgWidth = screen.offsetWidth;
119     var ul = screen.firstElementChild || screen.firstChild;
120     var ol = screen.children[1];
121     var div = screen.lastElementChild || screen.lastChild;
122     var spanArr = div.children;
123 
124     //2.复制第一张图片所在的li,添加到ul的最后面
125     var ulNewLi = ul.children[0].cloneNode(true);
126     ul.appendChild(ulNewLi);
127 
128     //3.给ol添加li,ul的个数-1个,并点亮第一个按钮
129     for (var i = 0; i < ul.children.length - 1; i++) {
130         var olNewLi = document.createElement("li");
131         olNewLi.innerHTML = i + 1;
132         ol.appendChild(olNewLi);
133     }
134 
135     var olLiArr = ol.children;
136     olLiArr[0].className = "current";
137 
138     //4.鼠标放到ol的li上,切换图片
139     for (var i = 0; i < olLiArr.length; i++) {
140         olLiArr[i].index = i;
141         olLiArr[i].onmouseover = function(){
142             for (var j = 0; j < olLiArr.length; j++) {
143                 olLiArr[j].className = "";
144             }
145             this.className = "current";
146             //鼠标放到小的方块上的时候索引值和key以及square同步
147             key = square = this.index;
148             //移动盒子
149             animate(ul,-this.index * imgWidth);
150         }
151     }
152 
153     //5.添加定时器
154     var timer = setInterval(autoPlay,1000);
155     //固定向右切换图片,两个定时器(一个记录图片,一个记录小方块)
156     var key = 0;
157     var square = 0;
158 
159     function autoPlay(){
160         //通过控制key的自增来模拟图片的索引值,然后移动ul
161         key ++;
162         if (key > olLiArr.length) {
163             //图片已经滑动到最后一张,接下来,跳转到第一张,然后在滑动到第二张
164             ul.style.left = 0;
165             key = 1;
166         }
167         animate(ul,-key * imgWidth);
168         //通过控制square的自增来模拟小方块的索引值,然后点亮盒子
169         square ++;
170         if (square > olLiArr.length - 1) {
171             square = 0;
172         }
173         for (var i = 0; i < olLiArr.length; i++) {
174             olLiArr[i].className = "";
175         }
176         olLiArr[square].className = "current";
177     }
178 
179     //鼠标放上去清除定时器,移开后再开启定时器
180     all.onmouseover = function(){
181         div.style.display = "block";
182         clearInterval(timer);
183     }
184     all.onmouseout = function(){
185         div.style.display = "none";
186         timer = setInterval(autoPlay, 1000);
187     }
188 
189     //6.左右切换图片,鼠标放上去显示,移开隐藏
190     spanArr[0].onclick = function(){
191         //通过控制key的自增来模拟图片的索引值,然后移动ul
192         key --;
193         if (key < 0) {
194             //先移动到最后一张,然后key的值取之前一张的索引值,然后在向前移动
195             ul.style.left = -imgWidth * (olLiArr.length) + "px";
196             key = olLiArr.length - 1;
197         }
198         animate(ul, -key * imgWidth);
199     
200 
201             //通过控制square的自增来模拟小方块的索引值,然后点亮盒子
202         //排他思想做小方块
203         square--;
204         if (square < 0) { //索引值不能大于等于5,如果等于5,立刻变为0;
205             square = olLiArr.length - 1;
206         }
207         for (var i = 0; i < olLiArr.length; i++) {
208             olLiArr[i].className = "";
209         }
210         olLiArr[square].className = "current";
211     }
212     spanArr[1].onclick = function() {
213         //右侧的和定时器一模一样
214         autoPlay();
215     }
216             function animate(ele, target) {
217         clearInterval(ele.timer);
218         var speed = target > ele.offsetLeft ? 10 : -10;
219         ele.timer = setInterval(function() {
220             var val = target - ele.offsetLeft;
221             ele.style.left = ele.offsetLeft + speed + "px";
222             if (Math.abs(val) < Math.abs(speed)) {
223                 ele.style.left = target + "px";
224                 clearInterval(ele.timer);
225             }
226         }, 10)
227     }
228 
229 
230     //7.
231 </script>
232 </body>
233 </html>
posted @ 2018-04-15 23:51  叶子玉  阅读(338)  评论(1编辑  收藏  举报