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>
