淘宝轮播图
先上图一张：
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>5.轮播图-杜鹏</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-16 --> 10 <link href="miaov_style.css" rel="stylesheet" type="text/css" /> 11 12 <script> 13 14 window.onload = function(){ 15 var aLi = document.getElementsByTagName('ol')[0].getElementsByTagName('li'); 16 var oUl = document.getElementsByTagName('ul')[0]; 17 var aLi2 = oUl.getElementsByTagName('li'); 18 var iNow = 0; 19 var iNow2 = 0; 20 var timer = null; 21 22 for(var i=0;i<aLi.length;i++){ 23 aLi[i].index = i; 24 aLi[i].onmouseover = function(){ 25 for(var i=0;i<aLi.length;i++){ 26 aLi[i].className = ''; 27 }; 28 this.className = 'active'; 29 30 startMove(oUl,{'top' : -150*this.index}); 31 iNow = this.index; 32 iNow2 = this.index; 33 clearInterval(timer); 34 }; 35 36 aLi[i].onmouseout = function(){ 37 timer = setInterval(toRun,2000); 38 }; 39 } 40 41 timer = setInterval(toRun,1000); 42 43 function toRun(){ 44 if(iNow==aLi.length-1){ 45 iNow = 0; 46 aLi2[0].style.position = 'relative'; 47 aLi2[0].style.top = 150 * aLi2.length + 'px'; 48 } 49 else{ 50 iNow++; 51 } 52 53 iNow2++; 54 //console.log( aLi2[0].offsetTop ); 55 56 for(var i=0;i<aLi.length;i++){ 57 aLi[i].className = ''; 58 }; 59 aLi[iNow].className = 'active'; 60 61 startMove(oUl,{ top : -150 * iNow2},function(){ 62 63 clearInterval(timer); 64 timer = setInterval(toRun,2000); 65 66 if(iNow==0){ 67 aLi2[0].style.position = 'static'; 68 oUl.style.top = 0; 69 iNow2 = 0; 70 } 71 72 }); 73 74 console.log( iNow +'-'+ iNow2 ) 75 } 76 77 }; 78 79 function startMove(obj,json,times,fx,fn){ 80 81 var iCur = {}; 82 var startTime = nowTime(); 83 84 if( typeof times == 'undefined' ){ 85 times = 400; 86 fx = 'linear'; 87 } 88 89 if( typeof times == 'string' ){ 90 if(typeof fx == 'function'){ 91 fn = fx; 92 } 93 fx = times; 94 times = 400; 95 } 96 else if(typeof times == 'function'){ 97 fn = times; 98 times = 400; 99 fx = 'linear'; 100 } 101 else if(typeof times == 'number'){ 102 if(typeof fx == 'function'){ 103 fn = fx; 104 fx = 'linear'; 105 } 106 else if(typeof fx == 'undefined'){ 107 fx = 'linear'; 108 } 109 } 110 111 for(var attr in json){ 112 iCur[attr] = 0; 113 if( attr == 'opacity' ){ 114 iCur[attr] = Math.round(getStyle(obj,attr)*100); 115 } 116 else{ 117 iCur[attr] = parseInt(getStyle(obj,attr)); 118 } 119 } 120 121 clearInterval(obj.timer); 122 obj.timer = setInterval(function(){ 123 124 var changeTime = nowTime(); 125 126 //startTime changeTime 127 128 var scale = 1-Math.max(0,startTime + times - changeTime)/times; //2000 - 0 -> 1-0 -> 0-1 129 130 for(var attr in json){ 131 132 var value = Tween[fx](scale*times,iCur[attr],json[attr] - iCur[attr],times); 133 134 if(attr == 'opacity'){ 135 obj.style.filter = 'alpha(opacity='+ value +')'; 136 obj.style.opacity = value/100; 137 } 138 else{ 139 obj.style[attr] = value + 'px'; 140 } 141 142 } 143 144 if(scale == 1){ 145 clearInterval(obj.timer); 146 if(fn){ 147 fn.call(obj); 148 } 149 } 150 151 152 },30); 153 154 155 function nowTime(){ 156 return (new Date()).getTime(); 157 } 158 159 160 } 161 162 function getStyle(obj,attr){ 163 if(obj.currentStyle){ 164 return obj.currentStyle[attr]; 165 } 166 else{ 167 return getComputedStyle(obj,false)[attr]; 168 } 169 } 170 171 172 var Tween = { 173 linear: function (t, b, c, d){ //匀速 174 return c*t/d + b; 175 }, 176 easeIn: function(t, b, c, d){ //加速曲线 177 return c*(t/=d)*t + b; 178 }, 179 easeOut: function(t, b, c, d){ //减速曲线 180 return -c *(t/=d)*(t-2) + b; 181 }, 182 easeBoth: function(t, b, c, d){ //加速减速曲线 183 if ((t/=d/2) < 1) { 184 return c/2*t*t + b; 185 } 186 return -c/2 * ((--t)*(t-2) - 1) + b; 187 }, 188 easeInStrong: function(t, b, c, d){ //加加速曲线 189 return c*(t/=d)*t*t*t + b; 190 }, 191 easeOutStrong: function(t, b, c, d){ //减减速曲线 192 return -c * ((t=t/d-1)*t*t*t - 1) + b; 193 }, 194 easeBothStrong: function(t, b, c, d){ //加加速减减速曲线 195 if ((t/=d/2) < 1) { 196 return c/2*t*t*t*t + b; 197 } 198 return -c/2 * ((t-=2)*t*t*t - 2) + b; 199 }, 200 elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入） 201 if (t === 0) { 202 return b; 203 } 204 if ( (t /= d) == 1 ) { 205 return b+c; 206 } 207 if (!p) { 208 p=d*0.3; 209 } 210 if (!a || a < Math.abs(c)) { 211 a = c; 212 var s = p/4; 213 } else { 214 var s = p/(2*Math.PI) * Math.asin (c/a); 215 } 216 return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 217 }, 218 elasticOut: function(t, b, c, d, a, p){ //正弦增强曲线（弹动渐出） 219 if (t === 0) { 220 return b; 221 } 222 if ( (t /= d) == 1 ) { 223 return b+c; 224 } 225 if (!p) { 226 p=d*0.3; 227 } 228 if (!a || a < Math.abs(c)) { 229 a = c; 230 var s = p / 4; 231 } else { 232 var s = p/(2*Math.PI) * Math.asin (c/a); 233 } 234 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 235 }, 236 elasticBoth: function(t, b, c, d, a, p){ 237 if (t === 0) { 238 return b; 239 } 240 if ( (t /= d/2) == 2 ) { 241 return b+c; 242 } 243 if (!p) { 244 p = d*(0.3*1.5); 245 } 246 if ( !a || a < Math.abs(c) ) { 247 a = c; 248 var s = p/4; 249 } 250 else { 251 var s = p/(2*Math.PI) * Math.asin (c/a); 252 } 253 if (t < 1) { 254 return - 0.5*(a*Math.pow(2,10*(t-=1)) * 255 Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 256 } 257 return a*Math.pow(2,-10*(t-=1)) * 258 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b; 259 }, 260 backIn: function(t, b, c, d, s){ //回退加速（回退渐入） 261 if (typeof s == 'undefined') { 262 s = 1.70158; 263 } 264 return c*(t/=d)*t*((s+1)*t - s) + b; 265 }, 266 backOut: function(t, b, c, d, s){ 267 if (typeof s == 'undefined') { 268 s = 3.70158; //回缩的距离 269 } 270 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 271 }, 272 backBoth: function(t, b, c, d, s){ 273 if (typeof s == 'undefined') { 274 s = 1.70158; 275 } 276 if ((t /= d/2 ) < 1) { 277 return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 278 } 279 return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 280 }, 281 bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出） 282 return c - Tween['bounceOut'](d-t, 0, c, d) + b; 283 }, 284 bounceOut: function(t, b, c, d){ 285 if ((t/=d) < (1/2.75)) { 286 return c*(7.5625*t*t) + b; 287 } else if (t < (2/2.75)) { 288 return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b; 289 } else if (t < (2.5/2.75)) { 290 return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b; 291 } 292 return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b; 293 }, 294 bounceBoth: function(t, b, c, d){ 295 if (t < d/2) { 296 return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b; 297 } 298 return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b; 299 } 300 } 301 302 303 </script> 304 <script> 305 306 /*window.onblur = function(){}; 307 window.onfocus = function(){}; 308 */ 309 310 </script> 311 </head> 312 313 <body> 314 315 <div id="play"> 316 <div class="packet"><!-- 为了消除offsetXXX的兼容性问题 --> 317 <ol> 318 <li class="active">1</li> 319 <li>2</li> 320 <li>3</li> 321 <li>4</li> 322 <li>5</li> 323 </ol> 324 <ul> 325 <li><a href="#"><img src="images/1.jpg" alt="广告一" /></a></li> 326 <li><a href="#"><img src="images/2.jpg" alt="广告二" /></a></li> 327 <li><a href="#"><img src="images/3.jpg" alt="广告三" /></a></li> 328 <li><a href="#"><img src="images/4.jpg" alt="广告四" /></a></li> 329 <li><a href="#"><img src="images/5.jpg" alt="广告五" /></a></li> 330 </ul> 331 </div> 332 </div> 333 334 </body> 335 </html>
css
3 * { padding: 0; margin: 0; } 4 li { list-style: none; } 5 img { border: none; } 6 7 body { background: #ecfaff; } 8 9 #play { width: 470px; height: 150px; overflow: hidden; border: 1px solid #d8d8d8; margin: 100px auto 0; } 10 .packet { width:470px; height: 150px; position: relative; overflow:-hidden;} 11 ol { position: absolute; right: 5px; bottom: 5px; z-index: 2; } 12 ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; } 13 .active { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; } 14 15 ul { position: absolute; top: 0px; left: 0px; z-index: 1; background:white; width: 470px; height: 150px; } 16 ul li { position:relative; width: 470px; height: 150px; top:0px; left:0px; } 17 ul img { float: left; width: 470px; height: 150px; }
