百度的图片轮换JS代码，支持FF【转】

文章来源：http://www.yczhang.com/post/312.html 

    这是一个网页设计中经常会用到的图片特效，实现多个图片之间的轮换，并分别带有连接，以前的代码只能适用于IE，在FF下始终没有得到很好的解决，今天意外的在百度联盟首页上看到这样的效果，支持FF，收藏起来备用。

<script language="JavaScript" type="text/JavaScript"> //运行文本域代码 function runEx(cod1) { cod=document.all(cod1) var code=cod.value; if (code!=""){ var newwin=window.open('','',''); //打开一个窗口并赋给变量newwin。 newwin.opener = null // 防止代码对论谈页面修改 newwin.document.write(code); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。 newwin.document.close(); } } </script> 

< script >
var  links  =   new  Array();
links[ 1 ]  =   " http://tongji.baidu.com " ;
links[ 2 ]  =   " http://hi.baidu.com/bdadd/blog/item/6f9f80b12e50cf57092302e3.html " ;
links[ 3 ]  =   " http://union.baidu.com/promo/dataunion/index.html " ;
links[ 4 ]  =   " http://www.umaz.cn " ;
var  imgs  =   new  Array();
for ( var  n  =   1 ; n  <=   5 ; n ++ ) imgs[n]  =   new  Image();
imgs[ 1 ].src  =   " http://union.baidu.com/img/tongji550.gif " ;
imgs[ 2 ].src  =   " http://union.baidu.com/img/banner071031.jpg " ;
imgs[ 3 ].src  =   " http://union.baidu.com/img/dataunion0711.jpg " ;
imgs[ 4 ].src  =   " http://union.baidu.com/img/umaz13_550.jpg " ;
var  tits  =   new  Array();
tits[ 1 ]  = " 百度统计 " ;
tits[ 2 ]  =   " 联盟杯摄影师大赛 " ;
tits[ 3 ]  =   " 百度行业报告 " ;
tits[ 4 ]  =   " 联盟志 " ;

var  imgwidth  =   550 ; // 图片宽度
var  imgheight  =   134 ; // 图片宽度

var  str  =   " <style type='text/css'> " ;
str  +=   " #imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;} " ;
str  +=   " #imgnv div.on,#imgnv div.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  +=   " #imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold} " ;
str  +=   " #imgnv div.off{background:#323232;color:#FFF;text-decoration:none} " ;
str  +=   " #titnv{margin-top:3px;color:#000;text-align:center;display:none;} " ;
str  +=   " </style> " ;
str  +=   " <div style='position:relative'> " ;
str  +=   " <div><a id='dlink' href=' "   +  links[ 1 ]  +   " ' target='_blank'><img id='dimg' src=' "   +  imgs[ 1 ].src  +   " ' border='0' width=' "   +  imgwidth  +   " ' height=' " + imgheight + " ' style='filter:Alpha(opacity=100)' οnmοuseοver='Pause(true)' οnmοuseοut='Pause(false)'></a></div> " ;

// 修改点1：循环添加内层div内容以增加个数
str  +=   " <div id='imgnv'><div id='it1' class='on' οnmοuseοver='ImgSwitch(1, true)' οnmοuseοut='Pause(false)'>1</div><div id='it2' class='off' οnmοuseοver='ImgSwitch(2, true)' οnmοuseοut='Pause(false)'>2</div><div id='it3' class='on' οnmοuseοver='ImgSwitch(3, true)' οnmοuseοut='Pause(false)'>3</div><div id='it4' class='off' οnmοuseοver='ImgSwitch(4, true)' οnmοuseοut='Pause(false)'>4</div></div> " ;
str  +=   " <div id='titnv'><b> "   +  tits[ 1 ]  +   " </b></div> " ;
str  +=   " </div> " ;
document.write(str);

var  oi  =  document.getElementById( " dimg " );
var  pause  =   false ;
var  curid  =   1 ;
var  lastid  =   1 ;
var  sw  =   1 ;
var  opacity  =   100 ;
var  speed  =   15 ;
var  delay  =  (document.all) ?   400 : 700 ;

function  SetAlpha(){
if (document.all){
if (oi.filters  &&  oi.filters.Alpha) oi.filters.Alpha.opacity  =  opacity;
} else {
oi.style.MozOpacity  =  ((opacity  >=   100 ) ?   99 :opacity)  /   100 ;
}
}

function  ImgSwitch(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;
}

function  ScrollImg(){
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 );
}

function  Pause(s){
pause  =  s;
}

function  StartScroll(){
setInterval(ScrollImg, speed);
}

function  CheckLoad(){
if  (imgs[ 1 ].complete  ==   true   &&  imgs[ 2 ].complete  ==   true ) {
clearInterval(checkid);
setTimeout(StartScroll,  2000 );
}
}

var  checkid  =  setInterval(CheckLoad,  10 );
</ script >