首页 > 代码库 > 水平滚动轮播图
水平滚动轮播图
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=http://www.mamicode.com/"../../../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 changeTime149 150 var scale = 1-Math.max(0,startTime + times - changeTime)/times; //2000 - 0 -> 1-0 -> 0-1151 152 for(var attr in json){153 154 var value = http://www.mamicode.com/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=http://www.mamicode.com/"images/1.jpg"/></li>332 <li><img src=http://www.mamicode.com/"images/2.jpg"/></li>333 <li><img src=http://www.mamicode.com/"images/3.jpg"/></li>334 <li><img src=http://www.mamicode.com/"images/4.jpg"/></li>335 <li><img src=http://www.mamicode.com/"images/5.jpg"/></li>336 </ul>337 </div>338 </div>339 </body>340 </html>
水平滚动轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。