This is a web design often used in the picture effects, to achieve the rotation between multiple pictures, and with a connection, the previous code can only be applied to IE, under the FF has not been a very good solution, today, unexpectedly in the Baidu Alliance home page to see such an effect, support FF, a collection of standby.
<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 = "/upload/20071119222354548.gif"; IMGS[2].SRC = "/upload/20071119222354556.jpg"; IMGS[3].SRC = "/upload/20071119222354919.jpg"; IMGS[4].SRC = "/upload/20071119222354150.jpg"; var tits = new Array (); TITS[1] = "Baidu statistics"; TITS[2] = "Federation Cup photographer Contest"; TITS[3] = "Baidu Industry Report"; TITS[4] = "Union zhi"; var imgwidth = 550;//picture width var imgheight = 134;//picture width 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 >"; STR + + "<div></div>"; Modify point 1: Loop add the inner div content to increase the number of 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 >=) 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 >=) return; if (sw = = 0) {opacity = 2; if (Opacity > Delay) {opacity = + SW = 1;} } if (sw = = 1) {opacity = 3; if (Opacity <) {opacity = ten SW = 3;} } setalpha (); if (SW!= 3)Return SW = 0; curid++; Modification Point 2: Here's 4 is also the number if (Curid > 4) curid = 1; Imgswitch (Curid, false); function Pause (s) {Pause = s; function Startscroll () {setinterval (scrollimg, speed); The function checkload () {if (Imgs[1].complete = = True && Imgs[2].complete = = True) {clearinterval (checkid); SetTimeout (Startscroll, 2000); } var checkid = SetInterval (Checkload, 10); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
