Js+css实现图片淡入效果的幻灯片代码

发布时间：2018-08-17 06:45:59 所属栏目：Asp教程来源：站长网

导读：Js+css实现图片淡入效果的幻灯片代码，这是一个小通条（横长的）的图片切换代码，由于时间关系只在IE下测试通过，如果你打算用可在其它浏览器下测试一下，当然。图片中的尺寸是可以自己修改的，不过需要你有一定的HTML知识哦！演示： htmlheadtitleJs+css

　　Js+css实现图片淡入效果的幻灯片代码，这是一个小通条（横长的）的图片切换代码，由于时间关系只在IE下测试通过，如果你打算用可在其它浏览器下测试一下，当然。图片中的尺寸是可以自己修改的，不过需要你有一定的HTML知识哦！

　　演示：

<html> <head> <title>Js+css实现图片淡入效果的幻灯片代码</title><style> * {margin:0;padding:0;} .wrap {overflow:hidden;zoom:1;position:relative;width:350px;background:#fff;} ul,dl {margin:0;padding:0;list-style:none;} ul {position:absolute;bottom:5px;right:5px;} ul li {width:20px;height:20px;border:1px solid #bbb;float:left;line-height:20px;text-align:center;cursor:pointer;background:#eee;border-bottom:1px solid #bbb;margin-right:1px;} ul .active {background:#fff;color:#fff;font-size:16px;font-weight:bold;background:#333;border:1px solid #aaa;} dl dd {display:none;height:111px;background:#fff;border:1px solid #aaa;text-align:center;line-height:111px;font-size:50px;font-family:arial;} dl dd img {width:348px;height:111px;display:block;} </style> <script> function imgbox(wra,tab,con){ var oDiv=document.getElementById(wra); var aBtn=document.getElementById(tab).getElementsByTagName('li'); var aDiv=document.getElementById(con).getElementsByTagName('dd'); var i=0; var iNow=0; var timer=null; var timer2=null; var al=1; function dr(){ aDiv[iNow].style.filter="alpha(opacity="+al+')'; aDiv[iNow].style.opacity=al/100; if(al<100){ al+=2; } } function move(){ for(i=0;i<aBtn.length;i++){ aDiv[i].style.display='none'; aBtn[i].className=''; clearInterval(timer2); al=0; } aBtn[iNow].className='active'; aDiv[iNow].style.display='block'; timer2=setInterval(dr,10) } for (i=0;i<aBtn.length;i++){ aBtn[i].index=i; aBtn[i].onclick=function (){ iNow=this.index; move(); } } timer=setInterval(function(){ iNow++; if(iNow>=aBtn.length){ iNow=0; } move(); },3000) oDiv.onmouseover=function(){ clearInterval(timer); } oDiv.onmouseout=function(){ timer=setInterval(function(){ iNow++; if(iNow>=aBtn.length){ iNow=0; } move(); },3000) } } window.onload=function(){ imgbox ('b1','tabb','conn'); } </script> </head> <body> <div id="b1" class="wrap"> <ul id="tabb"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <dl id="conn"> <dd style="filter:alpha(opacity=100);opacity=1;display:block;background:red"><img src=/uploads/common/images/wall1.jpg /></dd> <dd style="background:blue"><img src=/uploads/common/images/wall2.jpg /></dd> <dd style="background:green"><img src=/uploads/common/images/wall3.jpg /></dd> </dl> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：阜阳站长网）

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