首页 > 代码库 > 淘宝轮播图
淘宝轮播图
先上图一张：
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=http://www.mamicode.com/"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 changeTime127 128 var scale = 1-Math.max(0,startTime + times - changeTime)/times; //2000 - 0 -> 1-0 -> 0-1129 130 for(var attr in json){131 132 var value = http://www.mamicode.com/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=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/1.jpg" alt="广告一" /></a></li>326 <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/2.jpg" alt="广告二" /></a></li>327 <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/3.jpg" alt="广告三" /></a></li>328 <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"images/4.jpg" alt="广告四" /></a></li>329 <li><a href=http://www.mamicode.com/"#"><img src=http://www.mamicode.com/"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; }
淘宝轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。