) A good image rotation effect

This is an image special effect that is often used in web design. It achieves rotation between multiple images and is connected separately.CodeIt can only be applied to IE. It has never been well solved under ff. We can see this effect on the Baidu Alliance homepage. FF is supported and it can be added to favorites for backup.

 

Java code

2. <SCRIPT>
4. VaR links =NewArray ();
6. Links [1] =Http://tongji.baidu.com";
8. Links [2] =Http://hi.baidu.com/bdadd/blog/item/6f9f80b12e50cf57092302e3.html";
10. Links [3] =Http://union.baidu.com/promo/dataunion/index.html";
12. Links [4] =Http://www.umaz.cn";
14. VaR IMGs =NewArray ();
16. For(VAR n =1; N <=5; N ++) IMGs [N] =NewImage ();
18. IMGs [1]. Src =Http://union.baidu.com/img/tongji550.gif";
20. IMGs [2]. Src =Http://union.baidu.com/img/banner071031.jpg";
22. IMGs [3]. Src =Http://union.baidu.com/img/dataunion0711.jpg";
24. IMGs [4]. Src =Http://union.baidu.com/img/umaz13_550.jpg";
26. VaR tits =NewArray ();
28. Tits [1] ="Baidu Statistics";
30. Tits [2] ="Alliance cup photographers Competition";
32. Tits [3] ="Baidu Industry Report";
34. Tits [4] ="Alliance logs";
38. VaR imgwidth =550;// Image Width
40. VaR imgheight =134;// Image Width
44. VaR STR ="<Style type = 'text/CSS '>";
46. STR + ="# Imgnv {display: none; position: absolute; bottom:-1px; Right: 0; Height: 16px ;}# imgnv Div {float: Left; margin-right: 1px ;}";
48. 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 }";
50. STR + ="# Imgnv Div. On {Background: # ce0609; color: # FFF; font-weight: bold }";
52. STR + ="# Imgnv Div. off {Background: #323232; color: # FFF; text-Decoration: None }";
54. STR + ="# Titnv {margin-top: 3px; color: #000; text-align: center; display: none ;}";
56. STR + ="</Style>";
58. STR + ="<Div style = 'position: relative '>";
60. STR + ="<Div> <a id = 'dlink' href = '"+ Links [1] +"'Target = '_ blank'> + IMGs [1]. SRC +"'Border = '0' width = '"+ Imgwidth +"'Height = '"+ Imgheight +"'Style = 'filter: alpha (opacity = 100) 'onmouseover = 'pause (true)' onmouseout = 'pause (false) '> </a> </div>";
64. // Modify point 1: add the inner Div content cyclically to Increase the number
66. 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>";
68. STR + ="<Div id = 'titnv'> <B>"+ Tits [1] +"</B> </div>";
70. STR + ="</Div>";
72. Document. Write (STR );
76. VaR OI = Document. getelementbyid ("Dimg");
78. VaR pause =False;
80. VaR curid =1;
82. VaR lastid =1;
84. VaR Sw =1;
86. VaR opacity =100;
88. VaR speed =15;
90. VaR delay = (document. All )?400:700;
94. Function setalpha (){
96. If(Document. All ){
98. If(OI. filters & Oi. Filters. Alpha) Oi. Filters. Alpha. Opacity = opacity;
100. }Else{
102. Oi. style. Required opacity = (opacity> =100)?99: Opacity )/100;
104. }
106. }
110. Function imgswitch (ID, p ){
112. If(P ){
114. Pause =True;
116. Opacity =100;
118. Setalpha ();
120. }
122. Oi. src = IMGs [ID]. SRC;
124. Document. getelementbyid ("Dlink"). Href = Links [ID];
126. Document. getelementbyid ("It"+ Lastid). classname ="Off";
128. Document. getelementbyid ("It"+ Id). classname ="On";
130. Document. getelementbyid ("Titnv"). Innerhtml ="<B>"+ Tits [ID] +"</B>";
132. Curid = lastid = ID;
134. }
138. Function scrollimg (){
140. If(Pause & opacity> =100)Return;
142. If(SW =0){
144. Opacity + =2;
146. If(Opacity> delay) {opacity =100; Sw =1;}
148. }
150. If(SW =1){
152. Opacity-=3;
154. If(Opacity <10) {Opacity =10; Sw =3;}
156. }
158. Setalpha ();
160. If(SW! =3)Return;
162. Sw =0;
164. Curid ++;
166. // Modify point 2: Here, 4 is also the number
168. If(Curid>4) Curid =1;
170. Imgswitch (curid,False);
172. }
176. Function pause (s ){
178. Pause = s;
180. }
184. Function startscroll (){
186. Setinterval (scrollimg, speed );
188. }
192. Function checkload (){
194. If(IMGs [1]. Complete =True& IMGs [2]. Complete =True){
196. Clearinterval (checkid );
198. SetTimeout (startscroll,2000);
200. }
202. }
206. VaR checkid = setinterval (checkload,10);
208. </SCRIPT>