位置：首页>> 网络编程>> JavaScript>> 简单的淡入淡出图片轮换效果

简单的淡入淡出图片轮换效果

作者：客服果果　来源：51js　发布时间：2009-05-22 18:38:00　

标签：轮播,轮换,图片,效果

淡入淡出图片轮换轮播效果，可以做新闻图片推荐

需要的拿去用，效果预览请点击运行代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ldh_Javascript_code </title> <style> body{background:#000; } #fx_box{ width:570px; height:250px; border:1px solid #333; overflow:hidden; position:relative; } #fx_box img{ position:absolute; left:0;top:0; width:570px;height:250px; } #tip{ position:absolute; width:570px;height:20px; padding:15px; font-family:Arial; color:#fff; font-size:14px; font-weight:bold; bottom:0;left:0; background:url(http://imgqun.qq.com/cgi-bin/img?uuid=20a5c7bccf287d11d6801d69ea3742d138) repeat-x 0 100％ ; z-index:999999; filter:alpha(opacity=80); opacity:0.8; } </style> <script>ldh={ $:function(o){return typeof o=="string"?document.getElementById(o):o}, $$:function (o,p){return (p==undefined?document:this.$(p)).getElementsByTagName(o)}, on:function(o,type,fn){o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);}, opacity:function(who,x){ who=this.$(who); if(x==undefined){ if( !!window.ActiveXObject){ return who.filters.alpha?(who.filters.alpha.opacity/100):1; }else{ var op=who.style.opacity; return isNaN(op)?1:op*1; } } who.style.filter="alpha(opacity="+parseInt(x*100)+")"; who.style.opacity=x; return this; }, fadeTo:function(who,x,fn){ who=this.$(who); var fm=this.opacity(who),m=1,r=Math.floor,s=2,v; if(fm>x){m=-1;r=Math.ceil;s=1}; var iFx=function(){return fm=r((fm+m*0.02*s)*100)/100}; clearInterval(who.opacityTimer); who.opacityTimer=setInterval(function (){ var v=Math.max(0,Math.min(x,iFx())); ldh.opacity(who,v); if(v==x){ fn&&fn.call(who); clearInterval(who.opacityTimer); }; },13);return this; }, fadeOut:function(who,fn){return this.fadeTo(who,0,fn)}, fadeIn:function(who,fn){return this.fadeTo(who,1,fn)}, move:function(who,attr,val,s,fn){ who=this.$(who); var fm=parseInt(who.style[attr])||0; var iFx=this.fx(fm,val,s); clearInterval(who.moveTimer); who.moveTimer=setInterval(function (){ var v=iFx(); who.style[attr]=v+'px'; if(v==val){ fn&&fn.call(who); clearInterval(who.moveTimer); }; },13);return this; }, fx:function(form,to,s){ var m=Math[form<to?'ceil':'floor']; return function (){return form+=m((to-form)*(s||0.13))}; }};try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};//for IE6shower={ init:function(setting){ var ini={box:ldh.$(setting.box),tip:ldh.$(setting.tip),index:0,z:99,list:[]}; for(var Id in ini)this[Id]=ini[Id]; var imgs=ldh.$$('img',this.box); for (var i=0;i<imgs.length;++i ) { this.list.push(imgs[i]); imgs[i].style.zIndex=i; }; this.tip.innerHTML=imgs[0].getAttribute('alt'); this.hideTip(); }, show:function(){ var p2=this.list[this.index++]; if(this.index==this.list.length)this.index=0; ldh.opacity(p2,0); p2.style.zIndex=++this.z; ldh.fadeIn(p2,function (){ shower.tip.innerHTML=p2.getAttribute('alt'); ldh.move(shower.tip,'bottom',0,0.1,function (){ setTimeout(function(){shower.hideTip()},4000); }).opacity(shower.tip,0.8); }) }, hideTip:function(){ shower.show(); ldh.move(this.tip,'bottom',-100,0.05); }}ldh.on(window,'load',function (){ shower.init({ box:'fx_box', tip:'tip' });}) </script> </head> <body><div id="fx_box"> <img src="http://imgqun.qq.com/cgi-bin/img?uuid=2081c9a05df5d2be68dd9852efbbacd1e9" alt="All this time I was wasting" /> <img src="http://imgqun.qq.com/cgi-bin/img?uuid=208c883a2d6ecd296d1e0cdacaeebf3734" alt="Hoping you would come around" /> <img src="http://imgqun.qq.com/cgi-bin/img?uuid=208978614020ddc012d83db1334fb328d0" alt="I've been giving out chances every time" /> <img id="hhh" src="http://imgqun.qq.com/cgi-bin/img?uuid=208ec569326bcdc43807aa16088b4b7fe2" alt="And all you do is let me down" /> <div id="tip"> xxxx </div></div> </body></html>

投稿

简单的淡入淡出图片轮换效果

猜你喜欢