js实现百度联盟中一款不错的图片切换效果完整实例
本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法。分享给大家供大家参考。具体实现方法如下:
<html> <title>js实现百度联盟中的一个不错的图片切换效果</title> <body> <script> varlinks=newArray(); links[1]="http://www.baidu.com/"; links[2]="https://www.nhooo.com/"; links[3]="http://www.sohu.com/"; links[4]="http://sc.jb51.net/"; varimgs=newArray(); for(varn=1;n<=5;n++)imgs[n]=newImage(); imgs[1].src="images/m01.jpg"; imgs[2].src="images/m02.jpg"; imgs[3].src="images/m03.jpg"; imgs[4].src="images/m04.jpg"; vartits=newArray(); tits[1]="百度搜索"; tits[2]="毛票票"; tits[3]="搜狐主页"; tits[4]="素材之家"; varimgwidth=550;//图片宽度 varimgheight=134;//图片宽度 varstr="<styletype='text/css'>"; str+="#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnvdiv{float:left;margin-right:1px;}"; str+="#imgnvdiv.on,#imgnvdiv.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}"; str+="#imgnvdiv.on{background:#CE0609;color:#FFF;font-weight:bold}"; str+="#imgnvdiv.off{background:#323232;color:#FFF;text-decoration:none}"; str+="#titnv{margin-top:3px;color:#000;text-align:center;display:none;}"; str+="</style>"; str+="<divstyle='position:relative'>"; str+="<div><aid='dlink'href='"+links[1]+"'target='_blank'><imgid='dimg'src='"+imgs[1].src+"'border='0'width='"+imgwidth+"'height='"+imgheight+"'style='filter:Alpha(opacity=100)'onmouseover='Pause(true)'onmouseout='Pause(false)'></a></div>"; //修改点1:循环添加内层div内容以增加个数 str+="<divid='imgnv'><divid='it1'class='on'onmouseover='ImgSwitch(1,true)'onmouseout='Pause(false)'>1</div><divid='it2'class='off'onmouseover='ImgSwitch(2,true)'onmouseout='Pause(false)'>2</div><divid='it3'class='on'onmouseover='ImgSwitch(3,true)'onmouseout='Pause(false)'>3</div><divid='it4'class='off'onmouseover='ImgSwitch(4,true)'onmouseout='Pause(false)'>4</div></div>"; str+="<divid='titnv'><b>"+tits[1]+"</b></div>"; str+="</div>"; document.write(str); varoi=document.getElementById("dimg"); varpause=false; varcurid=1; varlastid=1; varsw=1; varopacity=100; varspeed=15; vardelay=(document.all)?400:700; functionSetAlpha(){ if(document.all){ if(oi.filters&&oi.filters.Alpha)oi.filters.Alpha.opacity=opacity; }else{ oi.style.MozOpacity=((opacity>=100)?99:opacity)/100; } } functionImgSwitch(id,p){ if(p){ pause=true; opacity=100; SetAlpha(); } oi.src=imgs[id].src; document.getElementById("dlink").href=links[id]; document.getElementById("it"+lastid).className="off"; document.getElementById("it"+id).className="on"; document.getElementById("titnv").innerHTML="<b>"+tits[id]+"</b>"; curid=lastid=id; } functionScrollImg(){ if(pause&&opacity>=100)return; if(sw==0){ opacity+=2; if(opacity>delay){opacity=100;sw=1;} } if(sw==1){ opacity-=3; if(opacity<10){opacity=10;sw=3;} } SetAlpha(); if(sw!=3)return; sw=0; curid++; //修改点2:这里的4也是个数 if(curid>4)curid=1; ImgSwitch(curid,false); } functionPause(s){ pause=s; } functionStartScroll(){ setInterval(ScrollImg,speed); } functionCheckLoad(){ if(imgs[1].complete==true&&imgs[2].complete==true){ clearInterval(checkid); setTimeout(StartScroll,2000); } } varcheckid=setInterval(CheckLoad,10); </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。