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{470px;height:150px;margin:40px auto; } 14 #packet{470px;height:150px;overflow:hidden;position:relative} 15 #packet ul{ position:absolute;top:0;left:0} 16 #slide li{ 470px;height:150px;position:relative;top:0;left:0;float:left } 17 #packet ol{position:absolute;right:5px;bottom:5px;} 18 #packet ol li{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>