滑动门式的图片轮播切换效果,JS+CSS实现

发布时间：2018-09-07 08:26:20 所属栏目：Asp教程来源：站长网

导读：非常不错的图片轮播切换效果，类似于烈火以前提到的滑动门，有所不同的是：本特效可以设置时间自动切换，作者设计的UI原型是一个滑动门，又结合了图片特效，整体效果感觉挺不错，对 Java Script的学习帮助挺大。看一下实例代码与演示： !DOCTYPE html PUB

　　非常不错的图片轮播切换效果，类似于烈火以前提到的滑动门，有所不同的是：本特效可以设置时间自动切换，作者设计的UI原型是一个滑动门，又结合了图片特效，整体效果感觉挺不错，对JavaScript的学习帮助挺大。

　　看一下实例代码与演示：

<!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>CSS+JS滑动门式的图片轮番切换 - Liehuo.Net</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .ldh_fx_panel{width:667px;position:relative;overflow:hidden;} .ldh_fx_panel img{border:none;width:669px;height:414px;} .ldh_fx_wrap{height:414px;overflow:hidden;} .ldh_fx_nav{position:absolute;bottom:0px;width:110%;height:28px;} .ldh_fx_nav a{display:block;float:left;display:inline;width:132px;height:100%;line-height :28px;text-decoration:none;margin-right:2px;font:14px/2.2 arial;position:relative;} .ldh_fx_nav a .ldh_fx_link_bg{display:block;height:100%;background:#666;filter:Alpha(opacity=70);opacity:0.7;zoom:1;} .ldh_fx_nav a .ldh_fx_link_txt{position:absolute;top:0;left:0;display:block;width:100%;text-align:center;cursor:pointer;color:#fff;} .ldh_fx_nav a:hover .ldh_fx_link_bg,.ldh_fx_nav a.hot .ldh_fx_link_bg{background:#fff;} .ldh_fx_nav a:hover .ldh_fx_link_txt,.ldh_fx_nav a.hot .ldh_fx_link_txt{color:#000} </style> </head> <body> <div class="ldh_fx_panel"> <div class="ldh_fx_wrap" id="ad_slide"> <a href="" ><img src="/uploads/common/images/liehuo_net_600x400_1.jpg" alt="" /></a> <a href="" ><img src="/uploads/common/images/liehuo_net_600x400_2.jpg" alt="" /></a> <a href="" ><img src="/uploads/common/images/liehuo_net_600x400_3.jpg" alt="" /></a> <a href="" ><img src="/uploads/common/images/liehuo_net_600x400_4.jpg" alt="" /></a> <a href="" ><img src="/uploads/common/images/liehuo_net_600x400_5.jpg" alt="" /></a> </div> <div class="ldh_fx_nav" id="ldh_fx_nav"> <a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">永远的迷：巨石阵</span></a> <a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">英国乡村</span></a> <a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">黄骅港</span></a> <a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">绿水绿草</span></a> <a href="" ><span class="ldh_fx_link_bg"></span><span class="ldh_fx_link_txt">天安门</span></a> </div> </div> </body> <script type="text/javascript"> function PicSlide(panel,opt){ this.panel=typeof panel=="string"?document.getElementById(panel):panel; for(var k in opt)this[k]=opt[k] this.init() }; PicSlide.prototype={ current:0, timer:null, time:500, type:'scroll', act:'scroll', interval:4000, init:function (){ var _this=this,world=this.panel.parentNode; this.imgs=this.panel.getElementsByTagName('A'); for(var i=0,l=this.imgs.length;i<l;i++) this.imgs[i].style.cssText='position:absolute;display:'+(i==0?'':'none'); this.createTab(); this.interval=Math.max(this.interval,this.time); world.onmouseover=function (){_this.hover=true}; world.onmouseout=function (){_this.hover=false}; this.auto() }, createTab:function (){ var len=this.imgs.length,btn,_this=this; this.nav=document.getElementById('ldh_fx_nav'); this.btns=this.nav.getElementsByTagName('A'); for(var i=0;i<len;i++){ btn=this.btns[i]; if(i==0)btn.className='hot'; btn.radioIndex=i; btn.onmouseover=function (){_this.focus(this.radioIndex)} } }, focus:function (next){ next=next%this.imgs.length; if(next==this.current)return; this.btns[this.current].className=''; this.btns[next].className='hot'; this.fade(next); }, fade:function (next){ var _this=this; clearInterval(this.timer); this.timer=this.fx(1,0,function (x){ _this.opacity( _this.imgs[_this.current],x) },function (){ _this.imgs[_this.current].style.display='none'; _this.opacity(_this.imgs[next],0); _this.imgs[next].style.display=''; _this.current=next; _this.timer=_this.fx(0,1,function (x){ _this.opacity( _this.imgs[next],x) },0,200,.5) }) }, fx:function (f,t,fn,ed,tm,r){ var D=Date,d=new D,e,ed=ed||D,c=tm||300,r=r||5; return e=setInterval(function (){ var z=Math.min(1,(new D-d)/c); var stop=fn(+f+(t-f)*Math.pow(z,r),z); if(z==1||false===stop)ed(clearTimeout(e)) },10) }, opacity:function (el,n){ el.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+n*100+');'; if(n==1)el.style.filter=null; el.style.opacity=n; }, auto:function (){ var _this=this; setInterval(function (){if(!_this.hover)_this.focus(_this.current+1)},this.interval); } }; var ldh_tb=new PicSlide('ad_slide',{type:'opacity'}); </script> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!