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程序设计有所帮助。