(转)一个好的图片轮换效果

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

Java代码


<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
 = 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)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";   
  
//修改点1：循环添加内层div内容以增加个数   
str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='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>