原生js写的一个简单slider

邢思淼
2023-12-01
  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6 <style type="text/css">
  7 body,div,ul,li {
  8     margin: 0;
  9     padding: 0;
 10 }
 11 ul,li {
 12     list-style: none;
 13 }
 14 a img {
 15     border: none;
 16 }
 17 .wrap {
 18     width: 100%;
 19     overflow: hidden;
 20     position: relative;
 21 }
 22 .wrap .prev,
 23 .wrap .next  {
 24     height: 320px;
 25     position: absolute;
 26     left: -50%;
 27     top: 0;
 28     background-color: #999;
 29     opacity: 0.7;
 30     width: 100%;
 31 }
 32 .wrap .next {
 33     left: auto;
 34     right: -50%;
 35 }
 36 .wrap .prev:hover,
 37 .wrap .next:hover {
 38     opacity: 0.5;
 39 }
 40 .container {
 41     width: 100%;
 42     height: 320px;
 43 }
 44 .container ul {
 45     height: 100%;
 46 }
 47 .container li {
 48     width: 1000px;
 49     height: 100%;
 50     float: left;
 51 }
 52 .container li a,
 53 .container li img {
 54     display: block;
 55     width: 100%;
 56     height: 100%;
 57 }
 58 .page {
 59     position: absolute;
 60     left: 50%;
 61     bottom: 10px;
 62     display:none;
 63 }
 64 .page span {
 65     float: left;
 66     margin-right: 10px;
 67     width: 20px;
 68     height: 20px;
 69     display: block;
 70     cursor: pointer;
 71     background: #999;
 72     border-radius: 50%;
 73     text-align: center;
 74     color: #fff;
 75 }
 76 .page .select {
 77     background: #f00;
 78 }
 79 </style>
 80 </head>
 81 <body>
 82 <div class="wrap">
 83     <div class="container" id="container">
 84         <ul>
 85             <li><a href="1"><img src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg"></a> </li>
 86             <li><a href="2"><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg"></a></li>
 87             <li><a href="3"><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg"></a></li>
 88             <li><a href="4"><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg"></a></li>
 89         </ul>
 90     </div>
 91     <div class="prev" id="prev"></div>
 92     <div class="next" id="next"></div>
 93     <div id="page" class="page"></div>
 94 </div>
 95 <script type="text/javascript">
 96 /*
 97 * Slider constructor
 98 * @param {Node}  ele  容器节点
 99 * @param {Int} index 默认显示第几张
100 */
101 var Slider = function(ele){
102     this.ele = ele;
103     this.oList = ele.children[0];
104     this.items = this.oList.getElementsByTagName("li");
105     this.itemWidth = parseInt(this.items[0].offsetWidth, 10);
106     this.page = document.getElementById("page");
107     this.prevBtn = document.getElementById("prev");
108     this.nextBtn = document.getElementById("next");
109     this.init();
110 }
111 Slider.prototype = {
112     constructor: Slider,
113     init: function(){
114         this.oList.style.position = 'absolute';
115         this.oList.style.top = 0;
116         this.oList.style.left = 0;
117 
118         this.going = 0;
119         this.current = 1;
120         this.speed = 100;
121         this.timer = null;
122         this.wrapWidth = parseInt(this.ele.offsetWidth, 10);
123         this.pageCircles = null;
124 
125         this.prevBtn.style.marginLeft = -this.itemWidth/2 + 'px';
126         this.nextBtn.style.marginRight = -this.itemWidth/2 + 'px';
127 
128         if(this.items.length > 2) {
129             this.setUp();
130         } else {
131             this.oList.style.left = (this.wrapWidth - this.itemWidth * this.items.length)/2 + 'px';
132             this.prevBtn.style.display = "none";
133             this.nextBtn.style.display = "none";
134         }
135 
136         this.oList.style.width = this.itemWidth * this.items.length + 'px';
137 
138     },
139     setUp:function(){
140         var first1 = this.items[0].cloneNode();
141             first1.innerHTML = this.items[0].innerHTML;
142 
143             first2 = this.items[1].cloneNode();
144             first2.innerHTML = this.items[1].innerHTML;
145 
146             last1 = this.items[this.items.length-1].cloneNode();
147             last1.innerHTML = this.items[this.items.length-1].innerHTML;
148 
149             last2 = this.items[this.items.length-2].cloneNode();
150             last2.innerHTML = this.items[this.items.length-2].innerHTML;
151 
152         this.oList.appendChild(first1);
153         this.oList.appendChild(first2);
154         this.oList.insertBefore(last1, this.items[0]);
155         this.oList.insertBefore(last2, this.items[0]);
156 
157         this.buildPage();
158         this.bindEvent();
159         this.slientGoTo();
160     },
161     buildPage:function(){
162         for(var i = 0,len = this.items.length - 4; i<len; i++) {
163             var circle = document.createElement('span');
164             circle.innerHTML = i + 1;
165             this.page.appendChild(circle);
166         }
167         this.pageCircles = this.page.getElementsByTagName('span');
168         this.addEvent(this.page, 'click', 'gotoIndex');
169         this.page.style.display = 'block';
170     },
171     bindEvent:function(){
172         this.addEvent(this.prevBtn, 'click', 'prev');
173         this.addEvent(this.nextBtn, 'click', 'next');
174     },
175     addEvent:function(ele, type, fn, context) {
176         context = context || this;
177         var innerFun = function(event) {
178             var evt = event || window.event;
179             if(typeof fn === 'string'){
180                context[fn].call(context, this, evt);
181             } else {
182                 fn.call(context, this, evt);
183             }
184         }
185         if(window.addEventListener) {
186             ele.addEventListener(type, innerFun, false);
187         } else {
188             ele.attachEvent('on'+type, innerFun);
189         }
190     },
191     index:function(ele){
192         var parentNode = ele.parentNode;
193         var eles = parentNode.getElementsByTagName(ele.tagName);
194 
195         for(var i = 0, len = eles.length; i<len; i++){
196             if(eles[i] == ele) {
197                 return i;
198             }
199         }
200     },
201     hasClass: function(obj, cls) {
202         return !!obj.className && obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
203     },
204     addClass: function(obj, cls) {
205         if (!this.hasClass(obj, cls)) obj.className += " " + cls;
206     },
207     removeClass:function (obj, cls) {
208         if (this.hasClass(obj, cls)) {
209             var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
210             obj.className = obj.className.replace(reg, ' ');
211         }
212     },
213     gotoIndex:function(eleContext, evt){
214         var ele = evt.target || evt.srcElement;
215         var index = this.index(ele);
216         if(this.current === this.items.length-4 && index === 0) {
217             this.current = 0;
218             this.slientGoTo();
219         } else if(this.current === 1 && index ===this.items.length-5) {
220             this.current = this.items.length-3;
221             this.slientGoTo();
222         }
223         this.current = index + 1;
224         this.doAnimate();
225     },
226     prev:function(eleContext, evt){
227         this.current--;
228         this.doAnimate();
229     },
230     next:function(eleContext, evt){
231         this.current++;
232         this.doAnimate();
233     },
234     doAnimate:function(){
235         this.distance = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 - parseInt(this.oList.style.left, 10);
236         if(this.distance < 0){
237             this.speed = -Math.abs(this.speed);
238         } else {
239             this.speed = Math.abs(this.speed);
240         }
241         this.distance = Math.abs(this.distance);
242         this.animate();
243     },
244     animate:function(){
245         var that = this;
246         this.timer = setTimeout(function() {
247             var left = parseInt(that.oList.style.left, 10) || 0;
248 
249             if (that.going+Math.abs(that.speed) >= that.distance) {
250                 if (that.speed > 0) {
251                     that.oList.style.left = left + that.distance - that.going + 'px';
252                 } else {
253                     that.oList.style.left = left - that.distance + that.going + 'px';
254                 }
255                 clearTimeout(that.timer);
256                 that.going = 0;
257                 that.onceEnd();
258             } else {
259                 that.going += Math.abs(that.speed);
260                 that.oList.style.left = left + that.speed + 'px';
261                 that.animate();
262             }
263         }, 25);
264 
265     },
266     slientGoTo:function(){
267         console.log(this.current);
268         this.oList.style.left = (this.wrapWidth-this.itemWidth*(2*this.current + 3))/2 + 'px';
269     },
270     setCircleSelect:function(){
271         for(var i=0,len = this.pageCircles.length; i<len; i++) {
272             var ele= this.pageCircles[i];
273             if(this.hasClass(ele, 'select')) {
274                 this.removeClass(ele, 'select');
275             }
276         }
277         this.addClass(this.pageCircles[this.current-1], 'select');
278     },
279     correctCurrent:function(){
280         if(this.current === 0) {
281             this.current = this.items.length - 4;
282         } else if(this.current === this.items.length - 3) {
283             this.current = 1;
284         } else {
285             return false;
286         }
287         this.slientGoTo();
288     },
289     onceEnd:function(){
290         this.correctCurrent();
291         this.setCircleSelect();
292     }
293 }
294 var con = document.getElementById("container");
295 var s = new Slider(con);
296 </script>
297 </body>
298 </html>

 

转载于:https://www.cnblogs.com/feng524822/p/3630525.html

 类似资料: