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

<script> var links = new Array(); links[1] = "http://www.syku.net"; links[2] = "http://www.syku.net"; links[3] = "http://www.syku.net"; links[4] = "http://www.syku.net"; var imgs = new Array(); for(var n = 1; n <= 5; n++) imgs[n] = new Image(); imgs[1].src = "http://www.syku.net/web/UploadFiles_5065/200804/20080410155809645.gif"; imgs[2].src = "http://www.syku.net/web/UploadFiles_5065/200804/20080410155812426.jpg"; imgs[3].src = "http://www.syku.net/web/UploadFiles_5065/200804/20080410155812500.jpg"; imgs[4].src = "http://www.syku.net/web/UploadFiles_5065/200804/20080410155813533.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>

   
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]