js实现淘宝首页图片轮播效果(转载)

yaofang123

HTML源码

1. <div id="slider">
   
2.     <ol class="player">
   
3.         <li><a href=""><img src="images/1.gif" alt="1" /></a></li>
   
4.         <li><a href=""><img src="images/2.jpg" alt="2" /></a></li>
   
5.         <li><a href=""><img src="images/3.jpg" alt="3" /></a></li>
   
6.         <li><a href=""><img src="images/4.jpg" alt="4" /></a></li>
   
7.         <li><a href=""><img src="images/5.jpg" alt="5" /></a></li>
   
8.     </ol>
   
9.     <ol class="btns">
   
10.         <li>1</li>
    
11.         <li>2</li>
    
12.         <li>3</li>
    
13.         <li>4</li>
    
14.         <li>5</li>
    
15.     </ol>
    
16. </div>

以下是js部分

1. function Player(btns, scrollContent, imgHeight, timeout, hoverClass) {
   
2. /*
   
3.  * btns:按钮，类型是数组
   
4.  * scrollContent:摇滚动的块，一个DOM对象，这里是ol
   
5.  * imgHeight:每一张图片的高度，当然，如果想改成左右滚动，这里传入每一张图片的宽，唯一需要注意的是每一张图片宽高必须相同，图片数量可调整
   
6.  * timeout:切换速度快慢，默认为1.5ms
   
7.  * hoverClass:每一个按钮激活时的类名
   
8. */
   
9.     hoverClass = hoverClass || 'active';
   
10.     timeout = timeout || 1500;
    
11.     this.btns = btns;
    
12.     this.scrollContent = scrollContent;
    
13.     this.hoverClass = hoverClass;
    
14.     this.timeout = timeout;
    
15.     this.imgHeight = imgHeight;
    
16. 
    
17.     var _this = this;
    
18.     for(var i=0; i<btns.length; i++) {
    
19.         this.btns[i].index = i;
    
20.         btns[i].onmouseover = function() {
    
21.             _this.stop();
    
22.             _this.invoke(this.index);
    
23.         }
    
24.         btns[i].onmouseout = function() {
    
25.             _this.start();
    
26.         }
    
27.     }
    
28.     this.invoke(0);
    
29.     this.isForward = true;
    
30.     this.pointer = 0;
    
31. }
    
32. 
    
33. Player.prototype = {
    
34.     constructor : Player,
    
35.     start : function() {
    
36.         var _this = this;
    
37.         this.stop();
    
38.         this.intervalId = setInterval(function() {
    
39.             _this.next();
    
40.         }, this.timeout);
    
41.     },
    
42.     stop: function() {
    
43.         clearInterval(this.intervalId);
    
44.     },
    
45.     invoke: function(n) {
    
46.         this.invoked = n || 0;
    
47.         this.clearHover();
    
48.         this.btns[this.invoked].className = this.hoverClass;
    
49.         //this.scrollContent.style.top = parseInt(-this.imgHeight * this.pointer) + 'px';
    
50.         var startVal = parseInt(this.scrollContent.style.top) || 0;
    
51.         var alterVal = (parseInt(-startVal - this.imgHeight * this.invoked));
    
52.         this.animateIterval && this.animateIterval();//修正快速切换时闪动
    
53.         this.animateIterval=animate(this.scrollContent, {top : startVal},{top : alterVal}, 1000, Tween.Quad.easeOut);
    
54.         //这里默认设置每张图滚动的总时间是1s
    
55.     },
    
56.     next: function() {
    
57.         if(this.pointer == 0) {
    
58.             this.isForward = true;
    
59.         }
    
60.         if(this.pointer >= this.btns.length) {
    
61.             this.isForward = false;
    
62.         }
    
63.         if(this.isForward) {
    
64.             this.invoke(this.pointer++);
    
65.         } else {
    
66.             this.invoke(--this.pointer);
    
67.         }
    
68.     },
    
69.     clearHover: function() {
    
70.         for(var i=0; i<this.btns.length; i++) {
    
71.             this.btns[i].className = '';
    
72.         };
    
73.     }
    
74. }
    
75. 
    
76. window.onload = function() {
    
77.     var btns = getByClass('btns', $('slider'))[0].getElementsByTagName('li');
    
78.     var player = getByClass('player', $('slider'))[0];
    
79.     var player = new Player(btns, player, 170, 1500, undefined);
    
80.     player.start();
    
81.     //player.invoke(2);
    
82. }

basic.js

1. /*
   
2. *-------------------------获取DOM节点方法---------------------
   
3. */
   
4. 
   
5. function $(id) {
   
6.     return document.getElementById(id);
   
7. };
   
8. 
   
9. function getByClass(className, context) {
   
10. /*
    
11.  * 功能说明：
    
12.  * 传入类名、节点名（默认document），获取context下类名为classNa的节点
    
13.  */
    
14.     context = context || document;
    
15.     if(context.getElementsByClassName) {
    
16.         return context.getElementsByClassName(className);
    
17.     } else {
    
18.         var nodes = [];
    
19.         var tags = context.getElementsByTagName('*');
    
20.         for(var i=0, len=tags.length; i<len; i++) {
    
21.             if(hasClass(tags[i], className)) {
    
22.                 nodes.push(tags[i]);
    
23.             }
    
24.         }
    
25.         return nodes;
    
26.     }
    
27. }
    
28. 
    
29. function hasClass(node, className) {
    
30. /*
    
31.  * 功能说明：
    
32.  * 传入节点及一个类名，检查该节点是否含有传入的类名
    
33.  */
    
34.     var names = node.className.split(/\s+/);
    
35.     for(var i=0, len=names.length; i<len; i++) {
    
36.         if(names[i] == className) {
    
37.             return true;
    
38.         }
    
39.     }
    
40.     return false;
    
41. }
    
42. 
    
43. /*function firstChild(node) {//获取node节点的第一个元素节点
    
44.     if(node.firstChild) {
    
45.         if(node.firstChild.nodeType == 1) {
    
46.             return node.firstChild;
    
47.         } else {
    
48.             var first = node.firstChild;
    
49.             while(first = first.nextSibling) {
    
50.                 if(first.nodeType == 1) {
    
51.                     return first;
    
52.                 };
    
53.             };
    
54.             return null;
    
55.         }
    
56.     } else {
    
57.         return null;
    
58.     }
    
59. }*/
    
60. 
    
61. function getChildNode(superNode, index) {
    
62. /*
    
63.  * 功能说明：
    
64.  * 传入父元素节点，按照index顺序查找子节点，从1开始（注意：只针对元素节点）
    
65.  * 如果不传入index或index是0，则返回所有子节点
    
66.  */
    
67.     if(!superNode.childNodes) return;
    
68.     //if (typeof index !== 'number') { alert('请输入数字索引'); return; }
    
69.     index = Number(index) || 0;
    
70.     var subNodes = [];
    
71.     var result = null;
    
72.     
    
73.     for(var i=0, len=superNode.childNodes.length; i<len; i++) {//得到所有子元素节点
    
74.         var node = superNode.childNodes[i];
    
75.         if(node.nodeType == 1) {
    
76.             subNodes.push(node);
    
77.         } else {
    
78.             continue;
    
79.         }
    
80.     }
    
81.     
    
82.     if(index === 0) {
    
83.         result = subNodes;
    
84.     } else {
    
85.         for(var i= 0; i<subNodes.length; i++) {
    
86.             subNodes[i].flag = i + 1;
    
87.             if(subNodes[i].flag == index) {
    
88.                 result = subNodes[i];
    
89.                 break;
    
90.             };
    
91.         }
    
92.     }
    
93.     
    
94.     return result? result : alert('你输入的索引值对应的子节点不存在！');
    
95. }
    
96. 
    
97. /*
    
98. *---------------------动画函数---------------------------
    
99. */
    
100. 
     
101. function animate(o,start,alter,dur,fx) {
     
102. /*
     
103.  * 功能说明：
     
104.  * 设置动画
     
105.  * o:要设置动画的对象
     
106.  * start:开始的对象
     
107.  * alter:总的对象
     
108.  * dur:动画持续多长时间
     
109.  * fx:动画类型
     
110.  */
     
111.     var curTime=0;
     
112.     var t=setInterval(function () {
     
113.         if (curTime>=dur) clearInterval(t);
     
114.         for (var i in start) {
     
115.             o.style[i]=fx(start[i],alter[i],curTime,dur)+"px";
     
116.         }
     
117.         curTime+=40;
     
118.         
     
119.     },40);
     
120.     return function () {
     
121.         clearInterval(t);
     
122.     };
     
123. }
     
124. 
     
125. function opacityAnimate(obj, start, alter, dur, fx) {
     
126. /*
     
127.  * 功能说明：
     
128.  * 设置对象的透明动画，start为动画起点，alter为动画终点，dur为总变化时间，
     
129.  * fx为动画类型，Linear表示匀速、Quad表示变速
     
130.  */
     
131.     var curTime = 0;
     
132. 
     
133.     var intervalId = setInterval(function() {
     
134.         if(curTime >= dur) {
     
135.             clearInterval(intervalId);
     
136.         }
     
137.         setOpacity(obj, fx(start, alter, curTime, dur));
     
138.         curTime += 50;
     
139.     }, 50);
     
140. }
     
141. 
     
142. var setOpacity = (document.documentElement.filters) ? function(obj, val) {
     
143. /*
     
144.  * 功能说明：
     
145.  * 设置掺入对象obj的opicity透明度为指定值val
     
146.  */
     
147.     obj.style.filter = "filter: alpha(opacity=" + val + ")";
     
148. } : function(obj, val) {
     
149.     obj.style.opacity = val/100;
     
150. }
     
151. 
     
152. var Tween = {
     
153. /*
     
154.  * 功能说明：
     
155.  * 加速运动
     
156.  * curTime:当前时间,即动画已经进行了多长时间,开始时间为0
     
157.  * start:开始值
     
158.  * alter:总的变化量
     
159.  * dur:动画持续多长时间
     
160.  */
     
161.     Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动
     
162.     Quad:{//二次方缓动
     
163.         easeIn:function (start,alter,curTime,dur) {
     
164.             return start+Math.pow(curTime/dur,2)*alter;
     
165.         },
     
166.         easeOut:function (start,alter,curTime,dur) {
     
167.             var progress =curTime/dur;
     
168.             return start-(Math.pow(progress,2)-2*progress)*alter;
     
169.         },
     
170.         easeInOut:function (start,alter,curTime,dur) {
     
171.             var progress =curTime/dur*2;
     
172.             return (progress<1?Math.pow(progress,2):-((--progress)*(progress-2) - 1))*alter/2+start;
     
173.         }
     
174.     },
     
175.     Cubic:{//三次方缓动
     
176.         easeIn:function (start,alter,curTime,dur) {
     
177.             return start+Math.pow(curTime/dur,3)*alter;
     
178.         },
     
179.         easeOut:function (start,alter,curTime,dur) {
     
180.             var progress =curTime/dur;
     
181.             return start-(Math.pow(progress,3)-Math.pow(progress,2)+1)*alter;
     
182.         },
     
183.         easeInOut:function (start,alter,curTime,dur) {
     
184.             var progress =curTime/dur*2;
     
185.             return (progress<1?Math.pow(progress,3):((progress-=2)*Math.pow(progress,2) + 2))*alter/2+start;
     
186.         }
     
187.     },
     
188.     Quart:{//四次方缓动
     
189.         easeIn:function (start,alter,curTime,dur) {
     
190.             return start+Math.pow(curTime/dur,4)*alter;
     
191.         },
     
192.         easeOut:function (start,alter,curTime,dur) {
     
193.             var progress =curTime/dur;
     
194.             return start-(Math.pow(progress,4)-Math.pow(progress,3)-1)*alter;
     
195.         },
     
196.         easeInOut:function (start,alter,curTime,dur) {
     
197.             var progress =curTime/dur*2;
     
198.             return (progress<1?Math.pow(progress,4):-((progress-=2)*Math.pow(progress,3) - 2))*alter/2+start;
     
199.         }
     
200.     },
     
201.     Quint:{//五次方缓动
     
202.         easeIn:function (start,alter,curTime,dur) {
     
203.             return start+Math.pow(curTime/dur,5)*alter;
     
204.         },
     
205.         easeOut:function (start,alter,curTime,dur) {
     
206.             var progress =curTime/dur;
     
207.             return start-(Math.pow(progress,5)-Math.pow(progress,4)+1)*alter;
     
208.         },
     
209.         easeInOut:function (start,alter,curTime,dur) {
     
210.             var progress =curTime/dur*2;
     
211.             return (progress<1?Math.pow(progress,5):((progress-=2)*Math.pow(progress,4) +2))*alter/2+start;
     
212.         }
     
213.     },
     
214.     Sine :{//正弦曲线缓动
     
215.         easeIn:function (start,alter,curTime,dur) {
     
216.             return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter;
     
217.         },
     
218.         easeOut:function (start,alter,curTime,dur) {
     
219.             return start+Math.sin(curTime/dur*Math.PI/2)*alter;
     
220.         },
     
221.         easeInOut:function (start,alter,curTime,dur) {
     
222.             return start-(Math.cos(curTime/dur*Math.PI/2)-1)*alter/2;
     
223.         }
     
224.     },
     
225.     Expo: {//指数曲线缓动
     
226.         easeIn:function (start,alter,curTime,dur) {
     
227.             return curTime?(start+alter*Math.pow(2,10*(curTime/dur-1))):start;
     
228.         },
     
229.         easeOut:function (start,alter,curTime,dur) {
     
230.             return (curTime==dur)?(start+alter):(start-(Math.pow(2,-10*curTime/dur)+1)*alter);
     
231.         },
     
232.         easeInOut:function (start,alter,curTime,dur) {
     
233.             if (!curTime) {return start;}
     
234.             if (curTime==dur) {return start+alter;}
     
235.             var progress =curTime/dur*2;
     
236.             if (progress < 1) {
     
237.                 return alter/2*Math.pow(2,10* (progress-1))+start;
     
238.             } else {
     
239.                 return alter/2* (-Math.pow(2, -10*--progress) + 2) +start;
     
240.             }
     
241.         }
     
242.     },
     
243.     Circ :{//圆形曲线缓动
     
244.         easeIn:function (start,alter,curTime,dur) {
     
245.             return start-alter*Math.sqrt(-Math.pow(curTime/dur,2));
     
246.         },
     
247.         easeOut:function (start,alter,curTime,dur) {
     
248.             return start+alter*Math.sqrt(1-Math.pow(curTime/dur-1));
     
249.         },
     
250.         easeInOut:function (start,alter,curTime,dur) {
     
251.             var progress =curTime/dur*2;
     
252.             return (progress<1?1-Math.sqrt(1-Math.pow(progress,2)):(Math.sqrt(1 - Math.pow(progress-2,2)) + 1))*alter/2+start;
     
253.         }
     
254.     },
     
255.     Elastic: {//指数衰减的正弦曲线缓动
     
256.         easeIn:function (start,alter,curTime,dur,extent,cycle) {
     
257.             if (!curTime) {return start;}
     
258.             if ((curTime==dur)==1) {return start+alter;}
     
259.             if (!cycle) {cycle=dur*0.3;}
     
260.             var s;
     
261.             if (!extent || extent< Math.abs(alter)) {
     
262.                 extent=alter;
     
263.                 s = cycle/4;
     
264.             } else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
     
265.             return start-extent*Math.pow(2,10*(curTime/dur-1)) * Math.sin((curTime-dur-s)*(2*Math.PI)/cycle);
     
266.         },
     
267.         easeOut:function (start,alter,curTime,dur,extent,cycle) {
     
268.             if (!curTime) {return start;}
     
269.             if (curTime==dur) {return start+alter;}
     
270.             if (!cycle) {cycle=dur*0.3;}
     
271.             var s;
     
272.             if (!extent || extent< Math.abs(alter)) {
     
273.                 extent=alter;
     
274.                 s =cycle/4;
     
275.             } else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
     
276.             return start+alter+extent*Math.pow(2,-curTime/dur*10)*Math.sin((curTime-s)*(2*Math.PI)/cycle);
     
277.         },
     
278.         easeInOut:function (start,alter,curTime,dur,extent,cycle) {
     
279.             if (!curTime) {return start;}
     
280.             if (curTime==dur) {return start+alter;}
     
281.             if (!cycle) {cycle=dur*0.45;}
     
282.             var s;
     
283.             if (!extent || extent< Math.abs(alter)) {
     
284.                 extent=alter;
     
285.                 s =cycle/4;
     
286.             } else {s=cycle/(Math.PI*2)*Math.asin(alter/extent);}
     
287.             var progress = curTime/dur*2;
     
288.             if (progress<1) {
     
289.                 return start-0.5*extent*Math.pow(2,10*(progress-=1))*Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);
     
290.             } else {
     
291.                 return start+alter+0.5*extent*Math.pow(2,-10*(progress-=1)) * Math.sin( (progress*dur-s)*(2*Math.PI)/cycle);
     
292.             }
     
293.         }
     
294.     },
     
295.     Back:{
     
296.         easeIn: function (start,alter,curTime,dur,s){
     
297.             if (typeof s == "undefined") {s = 1.70158;}
     
298.             return start+alter*(curTime/=dur)*curTime*((s+1)*curTime - s);
     
299.         },
     
300.         easeOut: function (start,alter,curTime,dur,s) {
     
301.             if (typeof s == "undefined") {s = 1.70158;}
     
302.             return start+alter*((curTime=curTime/dur-1)*curTime*((s+1)*curTime + s) + 1);
     
303.         },
     
304.         easeInOut: function (start,alter,curTime,dur,s){
     
305.             if (typeof s == "undefined") {s = 1.70158;}
     
306.             if ((curTime/=dur/2) < 1) {
     
307.                 return start+alter/2*(Math.pow(curTime,2)*(((s*=(1.525))+1)*curTime- s));
     
308.             }
     
309.             return start+alter/2*((curTime-=2)*curTime*(((s*=(1.525))+1)*curTime+ s)+2);
     
310.         }
     
311.     },
     
312.     Bounce:{
     
313.         easeIn: function(start,alter,curTime,dur){
     
314.             return start+alter-Tween.Bounce.easeOut(0,alter,dur-curTime,dur);
     
315.         },
     
316.         easeOut: function(start,alter,curTime,dur){
     
317.             if ((curTime/=dur) < (1/2.75)) {
     
318.                 return alter*(7.5625*Math.pow(curTime,2))+start;
     
319.             } else if (curTime < (2/2.75)) {
     
320.                 return alter*(7.5625*(curTime-=(1.5/2.75))*curTime + .75)+start;
     
321.             } else if (curTime< (2.5/2.75)) {
     
322.                 return alter*(7.5625*(curTime-=(2.25/2.75))*curTime + .9375)+start;
     
323.             } else {
     
324.                 return alter*(7.5625*(curTime-=(2.625/2.75))*curTime + .984375)+start;
     
325.             }
     
326.         },
     
327.         easeInOut: function (start,alter,curTime,dur){
     
328.             if (curTime< dur/2) {
     
329.                 return Tween.Bounce.easeIn(0,alter,curTime*2,dur) *0.5+start;
     
330.             } else {
     
331.                 return Tween.Bounce.easeOut(0,alter,curTime*2-dur,dur) *0.5 + alter*0.5 +start;
     
332.             }
     
333.         }
     
334.     }
     
335. };

HTML

1. <!DOCTYPE HTML>
   
2. <html><head>
   
3. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
4. 
   
5. 
   
6. <meta charset="utf-8">
   
7. <title>淘宝首页图片轮播效果</title>
   
8. <style>
   
9. <!--
   
10. * {margin: 0;padding:0;}
    
11. body {background: #222;}
    
12. ol {list-style: none;}
    
13. img {border: 0 none;}
    
14. #slider {
    
15.     border: 1px solid #F60;
    
16.     width: 490px;
    
17.     height: 170px;
    
18.     overflow: hidden;
    
19.     position: relative;
    
20.     margin: 2em auto;
    
21. }
    
22. #slider .player {
    
23.     /*width: 2450px;
    
24.     height: 850px;*/
    
25.     position: absolute;
    
26.     top: 0px;
    
27.     left: 0px;
    
28. }
    
29. #slider .player li {
    
30.     width: 490px;
    
31.     height: 170px;
    
32. }
    
33. #slider .btns {
    
34.     position: absolute;
    
35.     right: 10px;
    
36.     bottom: 5px;
    
37.     height: 30px;
    
38. }
    
39. #slider .btns li {
    
40.     font: 13px Tahoma, Arial, 宋体, sans-serif;
    
41.     float: left;
    
42.     margin: 0 3px;
    
43.     border: 1px solid #F60;
    
44.     background-color: #FFF;
    
45.     color: #CC937A;
    
46.     opacity: .8;
    
47.     cursor: pointer;
    
48.     width: 20px;
    
49.     height: 20px;
    
50.     line-height: 19px;
    
51.     text-align: center;
    
52.     -moz-border-radius: 10px;
    
53.     -webkit-border-radius: 10px;
    
54.     border-radius: 10px;
    
55. }
    
56. #slider .btns li.active {
    
57.     background: #F60;
    
58.     color: #FFF;
    
59.     font-weight: bold;
    
60.     opacity: 1;
    
61. }
    
62. -->
    
63. </style>
    
64. <script type="text/javascript" src="demo_files/basic.js"></script>
    
65. <script>
    
66. //<![CDATA[
    
67. function Player(btns, scrollContent, imgHeight, timeout, hoverClass) {
    
68. /*
    
69.  * btns:按钮，类型是数组
    
70.  * scrollContent:摇滚动的块，一个DOM对象，这里是ol
    
71.  * imgHeight:每一张图片的高度，当然，如果想改成左右滚动，这里传入每一张图片的宽，唯一需要注意的是每一张图片宽高必须相同，图片数量可调整
    
72.  * timeout:切换速度快慢，默认为1.5ms
    
73.  * hoverClass:每一个按钮激活时的类名
    
74. */
    
75.     hoverClass = hoverClass || 'active';
    
76.     timeout = timeout || 1500;
    
77.     this.btns = btns;
    
78.     this.scrollContent = scrollContent;
    
79.     this.hoverClass = hoverClass;
    
80.     this.timeout = timeout;
    
81.     this.imgHeight = imgHeight;
    
82. 
    
83.     var _this = this;
    
84.     for(var i=0; i<btns.length; i++) {
    
85.         this.btns[i].index = i;
    
86.         btns[i].onmouseover = function() {
    
87.             _this.stop();
    
88.             _this.invoke(this.index);
    
89.         }
    
90.         btns[i].onmouseout = function() {
    
91.             _this.start();
    
92.         }
    
93.     }
    
94.     this.invoke(0);
    
95.     this.isForward = true;
    
96.     this.pointer = 0;
    
97. }
    
98. 
    
99. Player.prototype = {
    
100.     constructor : Player,
     
101.     start : function() {
     
102.         var _this = this;
     
103.         this.stop();
     
104.         this.intervalId = setInterval(function() {
     
105.             _this.next();
     
106.         }, this.timeout);
     
107.     },
     
108.     stop: function() {
     
109.         clearInterval(this.intervalId);
     
110.     },
     
111.     invoke: function(n) {
     
112.         this.invoked = n || 0;
     
113.         this.clearHover();
     
114.         this.btns[this.invoked].className = this.hoverClass;
     
115.         //this.scrollContent.style.top = parseInt(-this.imgHeight * this.pointer) + 'px';
     
116.         var startVal = parseInt(this.scrollContent.style.top) || 0;
     
117.         var alterVal = (parseInt(-startVal - this.imgHeight * this.invoked));
     
118.         this.animateIterval && this.animateIterval();//修正快速切换时闪动
     
119.         this.animateIterval=animate(this.scrollContent, {top : startVal},{top : alterVal}, 1000, Tween.Quad.easeOut);
     
120.         //这里默认设置每张图滚动的总时间是1s
     
121.     },
     
122.     next: function() {
     
123.         if(this.pointer == 0) {
     
124.             this.isForward = true;
     
125.         }
     
126.         if(this.pointer >= this.btns.length) {
     
127.             this.isForward = false;
     
128.         }
     
129.         if(this.isForward) {
     
130.             this.invoke(this.pointer++);
     
131.         } else {
     
132.             this.invoke(--this.pointer);
     
133.         }
     
134.     },
     
135.     clearHover: function() {
     
136.         for(var i=0; i<this.btns.length; i++) {
     
137.             this.btns[i].className = '';
     
138.         };
     
139.     }
     
140. }
     
141. 
     
142. window.onload = function() {
     
143.     var btns = getByClass('btns', $('slider'))[0].getElementsByTagName('li');
     
144.     var player = getByClass('player', $('slider'))[0];
     
145.     var player = new Player(btns, player, 170, 1500, undefined);
     
146.     player.start();
     
147.     //player.invoke(2);
     
148. }
     
149. //]]>
     
150. </script>
     
151. <style type="text/css" charset="utf-8">/* See license.txt for terms of usage */
     
152. 
     
153. .firebugCanvas {
     
154. 
     
155.     position:fixed;
     
156. 
     
157.     top: 0;
     
158. 
     
159.     left: 0;
     
160. 
     
161.     display:none;
     
162. 
     
163.     border: 0 none;
     
164. 
     
165.     margin: 0;
     
166. 
     
167.     padding: 0;
     
168. 
     
169.     outline: 0;
     
170. 
     
171. }
     
172. 
     
173. 
     
174. 
     
175. .firebugCanvas:before, .firebugCanvas:after {
     
176. 
     
177.     content: "";
     
178. 
     
179. }
     
180. 
     
181. 
     
182. 
     
183. .firebugHighlight {
     
184. 
     
185.     z-index: 2147483646;
     
186. 
     
187.     position: fixed;
     
188. 
     
189.     background-color: #3875d7;
     
190. 
     
191.     margin: 0;
     
192. 
     
193.     padding: 0;
     
194. 
     
195.     outline: 0;
     
196. 
     
197.     border: 0 none;
     
198. 
     
199. }
     
200. 
     
201. 
     
202. 
     
203. .firebugHighlight:before, .firebugHighlight:after {
     
204. 
     
205.     content: "";
     
206. 
     
207. }
     
208. 
     
209. 
     
210. 
     
211. .firebugLayoutBoxParent {
     
212. 
     
213.     z-index: 2147483646;
     
214. 
     
215.     position: fixed;
     
216. 
     
217.     background-color: transparent;
     
218. 
     
219.     border-top: 0 none;
     
220. 
     
221.     border-right: 1px dashed #E00 !important;
     
222. 
     
223.     border-bottom: 1px dashed #E00 !important;
     
224. 
     
225.     border-left: 0 none;
     
226. 
     
227.     margin: 0;
     
228. 
     
229.     padding: 0;
     
230. 
     
231.     outline: 0;
     
232. 
     
233. }
     
234. 
     
235. 
     
236. 
     
237. .firebugRuler {
     
238. 
     
239.     position: absolute;
     
240. 
     
241.     margin: 0;
     
242. 
     
243.     padding: 0;
     
244. 
     
245.     outline: 0;
     
246. 
     
247.     border: 0 none;
     
248. 
     
249. }
     
250. 
     
251. 
     
252. 
     
253. .firebugRuler:before, .firebugRuler:after {
     
254. 
     
255.     content: "";
     
256. 
     
257. }
     
258. 
     
259. 
     
260. 
     
261. .firebugRulerH {
     
262. 
     
263.     top: -15px;
     
264. 
     
265.     left: 0;
     
266. 
     
267.     width: 100%;
     
268. 
     
269.     height: 14px;
     
270. 
     
271.     background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%13%88%00%00%00%0E%08%02%00%00%00L%25a%0A%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%F8IDATx%DA%EC%DD%D1n%E2%3A%00E%D1%80%F8%FF%EF%E2%AF2%95%D0D4%0E%C1%14%B0%8Fa-%E9%3E%CC%9C%87n%B9%81%A6W0%1C%A6i%9A%E7y%0As8%1CT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AATE9%FE%FCw%3E%9F%AF%2B%2F%BA%97%FDT%1D~K(%5C%9D%D5%EA%1B%5C%86%B5%A9%BDU%B5y%80%ED%AB*%03%FAV9%AB%E1%CEj%E7%82%EF%FB%18%BC%AEJ8%AB%FA'%D2%BEU9%D7U%ECc0%E1%A2r%5DynwVi%CFW%7F%BB%17%7Dy%EACU%CD%0E%F0%FA%3BX%FEbV%FEM%9B%2B%AD%BE%AA%E5%95v%AB%AA%E3E5%DCu%15rV9%07%B5%7F%B5w%FCm%BA%BE%AA%FBY%3D%14%F0%EE%C7%60%0EU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5JU%88%D3%F5%1F%AE%DF%3B%1B%F2%3E%DAUCNa%F92%D02%AC%7Dm%F9%3A%D4%F2%8B6%AE*%BF%5C%C2Ym~9g5%D0Y%95%17%7C%C8c%B0%7C%18%26%9CU%CD%13i%F7%AA%90%B3Z%7D%95%B4%C7%60%E6E%B5%BC%05%B4%FBY%95U%9E%DB%FD%1C%FC%E0%9F%83%7F%BE%17%7DkjMU%E3%03%AC%7CWj%DF%83%9An%BCG%AE%F1%95%96yQ%0Dq%5Dy%00%3Et%B5'%FC6%5DS%95pV%95%01%81%FF'%07%00%00%00%00%00%00%00%00%00%F8x%C7%F0%BE%9COp%5D%C9%7C%AD%E7%E6%EBV%FB%1E%E0(%07%E5%AC%C6%3A%ABi%9C%8F%C6%0E9%AB%C0'%D2%8E%9F%F99%D0E%B5%99%14%F5%0D%CD%7F%24%C6%DEH%B8%E9rV%DFs%DB%D0%F7%00k%FE%1D%84%84%83J%B8%E3%BA%FB%EF%20%84%1C%D7%AD%B0%8E%D7U%C8Y%05%1E%D4t%EF%AD%95Q%BF8w%BF%E9%0A%BF%EB%03%00%00%00%00%00%00%00%00%00%B8vJ%8E%BB%F5%B1u%8Cx%80%E1o%5E%CA9%AB%CB%CB%8E%03%DF%1D%B7T%25%9C%D5(%EFJM8%AB%CC'%D2%B2*%A4s%E7c6%FB%3E%FA%A2%1E%80~%0E%3E%DA%10x%5D%95Uig%15u%15%ED%7C%14%B6%87%A1%3B%FCo8%A8%D8o%D3%ADO%01%EDx%83%1A~%1B%9FpP%A3%DC%C6'%9C%95gK%00%00%00%00%00%00%00%00%00%20%D9%C9%11%D0%C0%40%AF%3F%EE%EE%92%94%D6%16X%B5%BCMH%15%2F%BF%D4%A7%C87%F1%8E%F2%81%AE%AAvzr%DA2%ABV%17%7C%E63%83%E7I%DC%C6%0Bs%1B%EF6%1E%00%00%00%00%00%00%00%00%00%80cr%9CW%FF%7F%C6%01%0E%F1%CE%A5%84%B3%CA%BC%E0%CB%AA%84%CE%F9%BF)%EC%13%08WU%AE%AB%B1%AE%2BO%EC%8E%CBYe%FE%8CN%ABr%5Dy%60~%CFA%0D%F4%AE%D4%BE%C75%CA%EDVB%EA(%B7%F1%09g%E5%D9%12%00%00%00%00%00%00%00%00%00H%F6%EB%13S%E7y%5E%5E%FB%98%F0%22%D1%B2'%A7%F0%92%B1%BC%24z3%AC%7Dm%60%D5%92%B4%7CEUO%5E%F0%AA*%3BU%B9%AE%3E%A0j%94%07%A0%C7%A0%AB%FD%B5%3F%A0%F7%03T%3Dy%D7%F7%D6%D4%C0%AAU%D2%E6%DFt%3F%A8%CC%AA%F2%86%B9%D7%F5%1F%18%E6%01%F8%CC%D5%9E%F0%F3z%88%AA%90%EF%20%00%00%00%00%00%00%00%00%00%C0%A6%D3%EA%CFi%AFb%2C%7BB%0A%2B%C3%1A%D7%06V%D5%07%A8r%5D%3D%D9%A6%CAu%F5%25%CF%A2%99%97zNX%60%95%AB%5DUZ%D5%FBR%03%AB%1C%D4k%9F%3F%BB%5C%FF%81a%AE%AB'%7F%F3%EA%FE%F3z%94%AA%D8%DF%5B%01%00%00%00%00%00%00%00%00%00%8E%FB%F3%F2%B1%1B%8DWU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*UiU%C7%BBe%E7%F3%B9%CB%AAJ%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5*%AAj%FD%C6%D4%5Eo%90%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5%86%AF%1B%9F%98%DA%EBm%BBV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%AD%D6%E4%F58%01%00%00%00%00%00%00%00%00%00%00%00%00%00%40%85%7F%02%0C%008%C2%D0H%16j%8FX%00%00%00%00IEND%AEB%60%82") repeat-x;
     
272. 
     
273.     border-top: 1px solid #BBBBBB;
     
274. 
     
275.     border-right: 1px dashed #BBBBBB;
     
276. 
     
277.     border-bottom: 1px solid #000000;
     
278. 
     
279. }
     
280. 
     
281. 
     
282. 
     
283. .firebugRulerV {
     
284. 
     
285.     top: 0;
     
286. 
     
287.     left: -15px;
     
288. 
     
289.     width: 14px;
     
290. 
     
291.     height: 100%;
     
292. 
     
293.     background: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%13%88%08%02%00%00%00%0E%F5%CB%10%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%06~IDATx%DA%EC%DD%D1v%A20%14%40Qt%F1%FF%FF%E4%97%D9%07%3BT%19%92%DC%40(%90%EEy%9A5%CB%B6%E8%F6%9Ac%A4%CC0%84%FF%DC%9E%CF%E7%E3%F1%88%DE4%F8%5D%C7%9F%2F%BA%DD%5E%7FI%7D%F18%DDn%BA%C5%FB%DF%97%BFk%F2%10%FF%FD%B4%F2M%A7%FB%FD%FD%B3%22%07p%8F%3F%AE%E3%F4S%8A%8F%40%EEq%9D%BE8D%F0%0EY%A1Uq%B7%EA%1F%81%88V%E8X%3F%B4%CEy%B7h%D1%A2E%EBohU%FC%D9%AF2fO%8BBeD%BE%F7X%0C%97%A4%D6b7%2Ck%A5%12%E3%9B%60v%B7r%C7%1AI%8C%BD%2B%23r%00c0%B2v%9B%AD%CA%26%0C%1Ek%05A%FD%93%D0%2B%A1u%8B%16-%95q%5Ce%DCSO%8E%E4M%23%8B%F7%C2%FE%40%BB%BD%8C%FC%8A%B5V%EBu%40%F9%3B%A72%FA%AE%8C%D4%01%CC%B5%DA%13%9CB%AB%E2I%18%24%B0n%A9%0CZ*Ce%9C%A22%8E%D8NJ%1E%EB%FF%8F%AE%CAP%19*%C3%BAEKe%AC%D1%AAX%8C*%DEH%8F%C5W%A1e%AD%D4%B7%5C%5B%19%C5%DB%0D%EF%9F%19%1D%7B%5E%86%BD%0C%95%A12%AC%5B*%83%96%CAP%19%F62T%86%CAP%19*%83%96%CA%B8Xe%BC%FE)T%19%A1%17xg%7F%DA%CBP%19*%C3%BA%A52T%86%CAP%19%F62T%86%CA%B0n%A9%0CZ%1DV%C6%3D%F3%FCH%DE%B4%B8~%7F%5CZc%F1%D6%1F%AF%84%F9%0F6%E6%EBVt9%0E~%BEr%AF%23%B0%97%A12T%86%CAP%19%B4T%86%CA%B8Re%D8%CBP%19*%C3%BA%A52huX%19%AE%CA%E5%BC%0C%7B%19*CeX%B7h%A9%0C%95%E1%BC%0C%7B%19*CeX%B7T%06%AD%CB%5E%95%2B%BF.%8F%C5%97%D5%E4%7B%EE%82%D6%FB%CF-%9C%FD%B9%CF%3By%7B%19%F62T%86%CA%B0n%D1R%19*%A3%D3%CA%B0%97%A12T%86uKe%D0%EA%B02*%3F1%99%5DB%2B%A4%B5%F8%3A%7C%BA%2B%8Co%7D%5C%EDe%A8%0C%95a%DDR%19%B4T%C66%82fA%B2%ED%DA%9FC%FC%17GZ%06%C9%E1%B3%E5%2C%1A%9FoiB%EB%96%CA%A0%D5qe4%7B%7D%FD%85%F7%5B%ED_%E0s%07%F0k%951%ECr%0D%B5C%D7-g%D1%A8%0C%EB%96%CA%A0%A52T%C6)*%C3%5E%86%CAP%19%D6-%95A%EB*%95q%F8%BB%E3%F9%AB%F6%E21%ACZ%B7%22%B7%9B%3F%02%85%CB%A2%5B%B7%BA%5E%B7%9C%97%E1%BC%0C%EB%16-%95%A12z%AC%0C%BFc%A22T%86uKe%D0%EA%B02V%DD%AD%8A%2B%8CWhe%5E%AF%CF%F5%3B%26%CE%CBh%5C%19%CE%CB%B0%F3%A4%095%A1%CAP%19*Ce%A8%0C%3BO*Ce%A8%0C%95%A12%3A%AD%8C%0A%82%7B%F0v%1F%2FD%A9%5B%9F%EE%EA%26%AF%03%CA%DF9%7B%19*Ce%A8%0C%95%A12T%86%CA%B8Ze%D8%CBP%19*Ce%A8%0C%95%D1ae%EC%F7%89I%E1%B4%D7M%D7P%8BjU%5C%BB%3E%F2%20%D8%CBP%19*Ce%A8%0C%95%A12T%C6%D5*%C3%5E%86%CAP%19*Ce%B4O%07%7B%F0W%7Bw%1C%7C%1A%8C%B3%3B%D1%EE%AA%5C%D6-%EBV%83%80%5E%D0%CA%10%5CU%2BD%E07YU%86%CAP%19*%E3%9A%95%91%D9%A0%C8%AD%5B%EDv%9E%82%FFKOee%E4%8FUe%A8%0C%95%A12T%C6%1F%A9%8C%C8%3D%5B%A5%15%FD%14%22r%E7B%9F%17l%F8%BF%ED%EAf%2B%7F%CF%ECe%D8%CBP%19*Ce%A8%0C%95%E1%93~%7B%19%F62T%86%CAP%19*Ce%A8%0C%E7%13%DA%CBP%19*Ce%A8%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4%AE%A4%F5%25%C0%00%DE%BF%5C'%0F%DA%B8q%00%00%00%00IEND%AEB%60%82") repeat-y;
     
294. 
     
295.     border-left: 1px solid #BBBBBB;
     
296. 
     
297.     border-right: 1px solid #000000;
     
298. 
     
299.     border-bottom: 1px dashed #BBBBBB;
     
300. 
     
301. }
     
302. 
     
303. 
     
304. 
     
305. .overflowRulerX > .firebugRulerV {
     
306. 
     
307.     left: 0;
     
308. 
     
309. }
     
310. 
     
311. 
     
312. 
     
313. .overflowRulerY > .firebugRulerH {
     
314. 
     
315.     top: 0;
     
316. 
     
317. }
     
318. 
     
319. 
     
320. 
     
321. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
     
322. 
     
323. .firebugLayoutBox {
     
324. 
     
325.     margin: 0;
     
326. 
     
327.     padding: 0;
     
328. 
     
329.     border: 0 none;
     
330. 
     
331.     outline: 0;
     
332. 
     
333. }
     
334. 
     
335. 
     
336. 
     
337. .firebugLayoutBox:before, .firebugLayoutBox:after {
     
338. 
     
339.     content: "";
     
340. 
     
341. }
     
342. 
     
343. 
     
344. 
     
345. .firebugLayoutBoxOffset {
     
346. 
     
347.     z-index: 2147483646;
     
348. 
     
349.     position: fixed;
     
350. 
     
351.     opacity: 0.8;
     
352. 
     
353. }
     
354. 
     
355. 
     
356. 
     
357. .firebugLayoutBoxMargin {
     
358. 
     
359.     background-color: #EDFF64;
     
360. 
     
361. }
     
362. 
     
363. 
     
364. 
     
365. .firebugLayoutBoxBorder {
     
366. 
     
367.     background-color: #666666;
     
368. 
     
369. }
     
370. 
     
371. 
     
372. 
     
373. .firebugLayoutBoxPadding {
     
374. 
     
375.     background-color: SlateBlue;
     
376. 
     
377. }
     
378. 
     
379. 
     
380. 
     
381. .firebugLayoutBoxContent {
     
382. 
     
383.     background-color: SkyBlue;
     
384. 
     
385. }
     
386. 
     
387. 
     
388. 
     
389. .firebugLayoutLine {
     
390. 
     
391.     z-index: 2147483646;
     
392. 
     
393.     background-color: #000000;
     
394. 
     
395.     opacity: 0.4;
     
396. 
     
397.     margin: 0;
     
398. 
     
399.     padding: 0;
     
400. 
     
401.     outline: 0;
     
402. 
     
403.     border: 0 none;
     
404. 
     
405. }
     
406. 
     
407. 
     
408. 
     
409. .firebugLayoutLine:before, .firebugLayoutLine:after {
     
410. 
     
411.     content: "";
     
412. 
     
413. }
     
414. 
     
415. 
     
416. 
     
417. .firebugLayoutLineLeft, .firebugLayoutLineRight {
     
418. 
     
419.     position: fixed;
     
420. 
     
421.     width: 1px;
     
422. 
     
423.     height: 100%;
     
424. 
     
425. }
     
426. 
     
427. 
     
428. 
     
429. .firebugLayoutLineTop, .firebugLayoutLineBottom {
     
430. 
     
431.     position: fixed;
     
432. 
     
433.     width: 100%;
     
434. 
     
435.     height: 1px;
     
436. 
     
437. }
     
438. 
     
439. 
     
440. 
     
441. .firebugLayoutLineTop {
     
442. 
     
443.     margin-top: -1px;
     
444. 
     
445.     border-top: 1px solid #999999;
     
446. 
     
447. }
     
448. 
     
449. 
     
450. 
     
451. .firebugLayoutLineRight {
     
452. 
     
453.     border-right: 1px solid #999999;
     
454. 
     
455. }
     
456. 
     
457. 
     
458. 
     
459. .firebugLayoutLineBottom {
     
460. 
     
461.     border-bottom: 1px solid #999999;
     
462. 
     
463. }
     
464. 
     
465. 
     
466. 
     
467. .firebugLayoutLineLeft {
     
468. 
     
469.     margin-left: -1px;
     
470. 
     
471.     border-left: 1px solid #999999;
     
472. 
     
473. }
     
474. 
     
475. 
     
476. 
     
477. .fbProxyElement {
     
478. 
     
479.     position: absolute;
     
480. 
     
481.     background-color: transparent;
     
482. 
     
483.     z-index: 2147483646;
     
484. 
     
485.     margin: 0;
     
486. 
     
487.     padding: 0;
     
488. 
     
489.     outline: 0;
     
490. 
     
491.     border: 0 none;
     
492. 
     
493. }
     
494. 
     
495. </style></head><body>
     
496. <div id="slider">
     
497.     <ol style="top: -312.8px;" class="player">
     
498.         <li><a href=""><img src="demo_files/1.gif" alt="1"></a></li>
     
499.         <li><a href=""><img src="demo_files/2.jpg" alt="2"></a></li>
     
500.         <li><a href=""><img src="demo_files/3.jpg" alt="3"></a></li>
     
501.         <li><a href=""><img src="demo_files/4.jpg" alt="4"></a></li>
     
502.         <li><a href=""><img src="demo_files/5.jpg" alt="5"></a></li>
     
503.     </ol>
     
504.     <ol class="btns">
     
505.         <li class="">1</li>
     
506.         <li class="">2</li>
     
507.         <li class="active">3</li>
     
508.         <li class="">4</li>
     
509.         <li class="">5</li>
     
510.     </ol>
     
511. </div>
     
512. </body></html>

1.