1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>水平轮播图</title>
8 <meta name="author" content="Administrator" />
9 <!-- Date: 2014-12-16 -->
10 <style>
11 *{margin:0;padding:0;font-size:13px;font-family: microsoft yahei}
12 li{list-style:none}
13 #wrap{width:470px;height:150px;margin:40px auto; }
14 #packet{width:470px;height:150px;overflow:hidden;position:relative}
15 #packet ul{ position:absolute;top:0;left:0}
16 #slide li{ width:470px;height:150px;position:relative;top:0;left:0;float:left }
17 #packet ol{position:absolute;right:5px;bottom:5px;}
18 #packet ol li{width:20px;height:20px;text-align:center;line-height:20px;background:orange; float: left;margin:0 2px}
19 #packet ol li.active{background:#E54829}
20
21 </style>
22 <!-- Date: 2014-12-15 -->
23 <script src="../../../tween.js"></script>
24 <script>
25 window.onload=function(){
26 var oPacket=document.getElementById('packet');
27 var oUl=document.getElementById('slide');
28 var aLi=oUl.getElementsByTagName('li');
29 var timer=null;
30 var iNow=0;
31 var iNow2=0;
32
33 // moveWithTime(oUl,{'top':-150},2000);
34
35 oUl.style.width = aLi[0].offsetWidth*aLi.length +'px';
36
37 /**ol创建**/
38 var oL=document.createElement('ol');
39 var str='';
40 for(var i=0;i<aLi.length;i++){
41 str+='<li>'+(i+1)+'</li>';
42 }
43 oL.innerHTML=str;
44 oPacket.appendChild(oL);
45 var aLi1=oL.getElementsByTagName('li');
46 aLi1[0].className='active';
47
48 for(var i=0;i<aLi1.length;i++){
49 aLi1[i].index=i;
50 aLi1[i].onmouseover=function(){
51
52 for(var i=0;i<aLi1.length;i++){
53 aLi1[i].className=''
54 }
55 this.className='active';
56 startMove(oUl,{'left':-470*this.index});
57 iNow=this.index;
58 iNow2=this.index;
59
60 clearInterval(timer);
61 }
62 aLi1[i].onmouseout=function(){
63 timer=setInterval(toRun,2000);
64 }
65 }
66
67
68 timer=setInterval(toRun,2000);
69
70 function toRun(){
71 if(iNow==aLi.length-1){
72 iNow=0;
73 aLi[0].style.position='relative';
74 aLi[0].style.left=470 * aLi.length +'px'
75 }else{
76 iNow++
77 }
78 iNow2++;
79
80 for(var i=0;i<aLi1.length;i++){
81 aLi1[i].className=''
82 }
83 aLi1[iNow].className='active';
84
85 startMove(oUl,{'left':-470*iNow2},function(){
86 clearInterval(timer);
87 timer=setInterval(toRun,2000);
88 if(iNow==0){
89 aLi[0].style.position='static';
90 oUl.style.left=0;
91 iNow2=0
92 }
93 })
94 }
95
96
97
98 }
99
100 /**时间版运动框架 结合Tweens()函数 可实现各种运动 匀速,加速,减速等 **/
101 function startMove(obj,json,times,fx,fn){
102
103 var iCur = {};
104 var startTime = nowTime();
105
106 if( typeof times == 'undefined' ){
107 times = 400;
108 fx = 'linear';
109 }
110
111 if( typeof times == 'string' ){
112 if(typeof fx == 'function'){
113 fn = fx;
114 }
115 fx = times;
116 times = 400;
117 }
118 else if(typeof times == 'function'){
119 fn = times;
120 times = 400;
121 fx = 'linear';
122 }
123 else if(typeof times == 'number'){
124 if(typeof fx == 'function'){
125 fn = fx;
126 fx = 'linear';
127 }
128 else if(typeof fx == 'undefined'){
129 fx = 'linear';
130 }
131 }
132
133 for(var attr in json){
134 iCur[attr] = 0;
135 if( attr == 'opacity' ){
136 iCur[attr] = Math.round(getStyle(obj,attr)*100);
137 }
138 else{
139 iCur[attr] = parseInt(getStyle(obj,attr));
140 }
141 }
142
143 clearInterval(obj.timer);
144 obj.timer = setInterval(function(){
145
146 var changeTime = nowTime();
147
148 //startTime changeTime
149
150 var scale = 1-Math.max(0,startTime + times - changeTime)/times; //2000 - 0 -> 1-0 -> 0-1
151
152 for(var attr in json){
153
154 var value = Tween[fx](scale*times,iCur[attr],json[attr] - iCur[attr],times);
155
156 if(attr == 'opacity'){
157 obj.style.filter = 'alpha(opacity='+ value +')';
158 obj.style.opacity = value/100;
159 }
160 else{
161 obj.style[attr] = value + 'px';
162 }
163
164 }
165
166 if(scale == 1){
167 clearInterval(obj.timer);
168 if(fn){
169 fn.call(obj);
170 }
171 }
172
173
174 },30);
175
176
177 function nowTime(){
178 return (new Date()).getTime();
179 }
180
181
182 }
183
184 function getStyle(obj,attr){
185 if(obj.currentStyle){
186 return obj.currentStyle[attr];
187 }
188 else{
189 return getComputedStyle(obj,false)[attr];
190 }
191 }
192
193
194 var Tween = {
195 linear: function (t, b, c, d){ //匀速
196 return c*t/d + b;
197 },
198 easeIn: function(t, b, c, d){ //加速曲线
199 return c*(t/=d)*t + b;
200 },
201 easeOut: function(t, b, c, d){ //减速曲线
202 return -c *(t/=d)*(t-2) + b;
203 },
204 easeBoth: function(t, b, c, d){ //加速减速曲线
205 if ((t/=d/2) < 1) {
206 return c/2*t*t + b;
207 }
208 return -c/2 * ((--t)*(t-2) - 1) + b;
209 },
210 easeInStrong: function(t, b, c, d){ //加加速曲线
211 return c*(t/=d)*t*t*t + b;
212 },
213 easeOutStrong: function(t, b, c, d){ //减减速曲线
214 return -c * ((t=t/d-1)*t*t*t - 1) + b;
215 },
216 easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
217 if ((t/=d/2) < 1) {
218 return c/2*t*t*t*t + b;
219 }
220 return -c/2 * ((t-=2)*t*t*t - 2) + b;
221 },
222 elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）
223 if (t === 0) {
224 return b;
225 }
226 if ( (t /= d) == 1 ) {
227 return b+c;
228 }
229 if (!p) {
230 p=d*0.3;
231 }
232 if (!a || a < Math.abs(c)) {
233 a = c;
234 var s = p/4;
235 } else {
236 var s = p/(2*Math.PI) * Math.asin (c/a);
237 }
238 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
239 },
240 elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出）
241 if (t === 0) {
242 return b;
243 }
244 if ( (t /= d) == 1 ) {
245 return b+c;
246 }
247 if (!p) {
248 p=d*0.3;
249 }
250 if (!a || a < Math.abs(c)) {
251 a = c;
252 var s = p / 4;
253 } else {
254 var s = p/(2*Math.PI) * Math.asin (c/a);
255 }
256 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
257 },
258 elasticBoth: function(t, b, c, d, a, p){
259 if (t === 0) {
260 return b;
261 }
262 if ( (t /= d/2) == 2 ) {
263 return b+c;
264 }
265 if (!p) {
266 p = d*(0.3*1.5);
267 }
268 if ( !a || a < Math.abs(c) ) {
269 a = c;
270 var s = p/4;
271 }
272 else {
273 var s = p/(2*Math.PI) * Math.asin (c/a);
274 }
275 if (t < 1) {
276 return - 0.5*(a*Math.pow(2,10*(t-=1)) *
277 Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
278 }
279 return a*Math.pow(2,-10*(t-=1)) *
280 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
281 },
282 backIn: function(t, b, c, d, s){ //回退加速（回退渐入）
283 if (typeof s == 'undefined') {
284 s = 1.70158;
285 }
286 return c*(t/=d)*t*((s+1)*t - s) + b;
287 },
288 backOut: function(t, b, c, d, s){
289 if (typeof s == 'undefined') {
290 s = 3.70158; //回缩的距离
291 }
292 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
293 },
294 backBoth: function(t, b, c, d, s){
295 if (typeof s == 'undefined') {
296 s = 1.70158;
297 }
298 if ((t /= d/2 ) < 1) {
299 return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
300 }
301 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
302 },
303 bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）
304 return c - Tween['bounceOut'](d-t, 0, c, d) + b;
305 },
306 bounceOut: function(t, b, c, d){
307 if ((t/=d) < (1/2.75)) {
308 return c*(7.5625*t*t) + b;
309 } else if (t < (2/2.75)) {
310 return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
311 } else if (t < (2.5/2.75)) {
312 return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
313 }
314 return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
315 },
316 bounceBoth: function(t, b, c, d){
317 if (t < d/2) {
318 return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
319 }
320 return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
321 }
322 }
323
324
325 </script>
326 </head>
327 <body>
328 <div id="wrap">
329 <div id="packet">
330 <ul id="slide">
331 <li><img src="images/1.jpg"/></li>
332 <li><img src="images/2.jpg"/></li>
333 <li><img src="images/3.jpg"/></li>
334 <li><img src="images/4.jpg"/></li>
335 <li><img src="images/5.jpg"/></li>
336 </ul>
337 </div>
338 </div>
339 </body>
340 </html>
