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 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 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 100%; 42 height: 320px; 43 } 44 .container ul { 45 height: 100%; 46 } 47 .container li { 48 1000px; 49 height: 100%; 50 float: left; 51 } 52 .container li a, 53 .container li img { 54 display: block; 55 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 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>