Image Rotation effects from Baidu: code _ image effects

Image rotation effect Code taken from Baidu is a special image effect that is often used in Webpage Design. It allows rotation between multiple images and connects them separately. The previous code can only be applied to IE, I have never been able to solve this problem under FF. I accidentally saw this effect on the Baidu Alliance homepage today. I support FF and add it to my favorites for backup.

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] =" Alliance cup photographer Contest "; tits [3] = "Baidu Industry Report"; tits [4] = "Consortium"; var imgwidth = 550; // Image Width var imghe Ight = 134; // The Image Width var str = "<style type = 'text/css '>"; str + = "# imgnv {display: none; position: absolute; bottom:-1px; right: 0; height: 16px;} # imgnv p {float: left; margin-right: 1px;} "; str + =" # imgnv p. on, # imgnv p. 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 p. on {background: # CE0609; color: # FFF; font-weight: bold} "; str + =" # imgnv p. off {background: #323232; color: # FFF; text-decoration: none} "; str + =" # titnv {margin-top: 3px; color: #000; text-align: center; display: none;} "; str + =" </style> "; str + =" <p style = 'position: relative '> "; str + = "<p> </p>"; // modify point 1: cyclically Add the inner p Content to add str + = "<p id = 'imgnv'> <p id = 'it1' class = 'on' onmouseover = 'imgswitch (1, true) 'onmouseout = 'pause (false) '> 1 </p> <p id = 'it2' class = 'off' onmouseover = 'imgswitch (2, true) 'onmouseout = 'pause (false) '> 2 </p> <p id = 'it3' class = 'on' onmouseover = 'imgswitch (3, true) 'onmouseout = 'pause (false) '> 3 </p> <p id = 'it4' class = 'off' onmouseover = 'imgswitch (4, true) 'onmouseout = 'pause (false) '> 4 </p> "; str + =" <p id = 'Titnv'> <B> "+ tits [1] +" </B> </p> "; str + =" </p> "; 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. required opacity = (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 ++; // modify point 2: Here 4 is also the number 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 select all Note: If you need to introduce external Js, You need to refresh it to execute]