图片轮播特效果代码

来源：互联网发布：php通过求余能得到整数编辑：程序博客网时间：2024/06/13 02:01
<span style="font-size:32px;color:#FF0000;">注意：  1.js可以分离出去，但是window.onload=s;必须在js调用之后再出现。  2.结构必须在<div id="fade_focus"></div>中，或者把id改掉也可以，但是也必须改js中相应的id  改动：</span>1.改大小：        先改html中图片大小，再改样式中相应的大小就可以了。（两都必须同时改动）2.效果出来后首先是loading,你如果不想要的话，可能把其这几个字母删除，再去loading样式里删除padding-top:30px;就可以了。但是不可以把相应的div删除。3.切换间隔时间、速度的改在js里有提示改相应的即可。<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css" >.lunhuan{width:695px;height:auto;overflow:hidden;background-color:#000000;position:relative;}.loading{width:691px;border: 0px ;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;padding-top:30px;}.d2{width:100%;height:305px;overflow:hidden;}.lunhuan_num{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;height:29px;overflow:hidden;}.lunhuan_num span{display:inline-block;height:30px; margin-left:10px; line-height:26px;}img{border:0px;}#lunhuan_ul{display:none;}.lunhuan_click{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}.lunhuan_num1,.lunhuan_num2{float:left;    color:#7a7a7a;    width:30px;    height:30px;    line-height:30px;    cursor:pointer;    text-align:center;    font-size:14px;    font-weight:bold;    }.lunhuan_num2{background:url(images/iconbg.png) no-repeat;    color:#fff;}</style><script language="javascript" type="text/javascript">var s=function(){var interv=2000; //切换间隔时间var interv2=10; //切换速速var opac1=80; //文字背景的透明度var source="fade_focus" //焦点轮换图片容器的id名称//获取对象function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}function getid(id){return document.getElementById(id)};var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var lunhuan_click=document.createElement("div");lunhuan_click.className="lunhuan_click";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="lunhuan_num1";a.onmouseover=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();this.className="lunhuan_num2"};a.onmouseout=function(){this.className="lunhuan_num1";sc(j)};lunhuan_click.appendChild(a);}//控制图层透明度function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}//控制焦点按钮function sc(n){for(var i=0;i<li.length;i++){lunhuan_click.childNodes[i].className="lunhuan_num1"};lunhuan_click.childNodes[n].className="lunhuan_num2";}title.className="lunhuan_num";title.appendChild(span);alpha(title,opac1);id.className="lunhuan";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(lunhuan_click);//渐显var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}//渐隐var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}//滚动文字var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0 && t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0 && t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};fadeon();}window.onload=s;</script></head><body><div id="fade_focus"  style="overflow:hidden;">    <div class="loading">Loading...<br /><img src="images/ldhkf.jpg" width="695" height="305" /></div>    <ul id="lunhuan_ul">      <li><a href="" target="_blank"><img src="images/ldhkf.jpg" width="695" height="305" alt="标题1111111" /></a></li>      <li><a href="" target="_blank"><img src="images/dk.jpg" width="695" height="305" alt="标题22222222" /></a></li>      <li><a href="" target="_blank"><img src="images/hbdz.jpg" width="695" height="305" alt="标题33333333" /></a></li>      <li><a href="" target="_blank"><img src="images/lht_28.jpg" width="695" height="305" alt="标题444444" /></a></li>       <li><a href="" target="_blank"><img src="images/l5_25.jpg" width="695" height="305" alt="标题555555" /></a></li>    </ul></div></body></html>
0 0