摘自百度的图片轮换效果代码

这是一个网页设计中经常会用到的图片特效，实现多个图片之间的轮换，并分别带有连接，以前的代码只能适用于ie，在ff下始终没有得到很好的解决，今天意外的在百度联盟首页上看到这样的效果，支持ff，收藏起来备用。 
</p> <p>var links = new array();<br /> links[1] = "http://tongji.baidu.com";<br /> links[2] = "http://hi.baidu.com/bdadd/blog/item/6f9f80b12e50cf57092302e3.html";<br /> links[3] = "http://union.baidu.com/promo/dataunion/index.html";<br /> links[4] = "http://www.umaz.cn";<br /> var imgs = new array();<br /> for(var n = 1; n <= 5; n++) imgs[n] = new image();<br /> imgs[1].src = "/upload/20071119222354548.gif";<br /> imgs[2].src = "/upload/20071119222354556.jpg";<br /> imgs[3].src = "/upload/20071119222354919.jpg";<br /> imgs[4].src = "/upload/20071119222354150.jpg";<br /> var tits = new array();<br /> tits[1] ="百度统计";<br /> tits[2] = "联盟杯摄影师大赛";<br /> tits[3] = "百度行业报告";<br /> tits[4] = "联盟志"; </p> <p>var imgwidth = 550;//图片宽度<br /> var imgheight = 134;//图片宽度 </p> <p>var str = "";<br /> str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";<br /> 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}";<br /> str += "#imgnv div.on{background:#ce0609;color:#fff;font-weight:bold}";<br /> str += "#imgnv div.off{background:#323232;color:#fff;text-decoration:none}";<br /> str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";<br /> str += "";<br /> str += "";<br /> str += ""; </p> <p>//修改点1：循环添加内层div内容以增加个数<br /> str += "1234";<br /> str += "<b>" + tits[1] + "</b>";<br /> str += "";<br /> document.write(str); </p> <p>var oi = document.getelementbyid("dimg");<br /> var pause = false;<br /> var curid = 1;<br /> var lastid = 1;<br /> var sw = 1;<br /> var opacity = 100;<br /> var speed = 15;<br /> var delay = (document.all)? 400:700; </p> <p>function setalpha(){<br /> if(document.all){<br /> if(oi.filters && oi.filters.alpha) oi.filters.alpha.opacity = opacity;<br /> }else{<br /> oi.style.mozopacity = ((opacity >= 100)? 99:opacity) / 100;<br /> }<br /> } </p> <p>function imgswitch(id, p){<br /> if(p){<br /> pause = true;<br /> opacity = 100;<br /> setalpha();<br /> }<br /> oi.src = imgs[id].src;<br /> document.getelementbyid("dlink").href = links[id];<br /> document.getelementbyid("it" + lastid).classname = "off";<br /> document.getelementbyid("it" + id).classname = "on";<br /> document.getelementbyid("titnv").innerhtml = "<b>" + tits[id] + "</b>";<br /> curid = lastid = id;<br /> } </p> <p>function scrollimg(){<br /> if(pause && opacity >= 100) return;<br /> if(sw == 0){<br /> opacity += 2;<br /> if(opacity > delay){ opacity = 100; sw = 1; }<br /> }<br /> if(sw == 1){<br /> opacity -= 3;<br /> if(opacity 4) curid = 1;<br /> imgswitch(curid, false);<br /> } </p> <p>function pause(s){<br /> pause = s;<br /> } </p> <p>function startscroll(){<br /> setinterval(scrollimg, speed);<br /> } </p> <p>function checkload(){<br /> if (imgs[1].complete == true && imgs[2].complete == true) {<br /> clearinterval(checkid);<br /> settimeout(startscroll, 2000);<br /> }<br /> } </p> <p>var checkid = setinterval(checkload, 10); </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]