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

 

1. <script>   
2. var links = new
3. links[1] = "http://tongji.baidu.com";
4. links[2] = "http://hi.baidu.com/bdadd/blog/item/6f9f80b12e50cf57092302e3.html";
5. links[3] = "http://union.baidu.com/promo/dataunion/index.html";
6. links[4] = "http://www.umaz.cn";
7. var imgs = new
8. for(var n = 1; n <= 5; n++) imgs[n] = new
9. imgs[1].src = "http://union.baidu.com/img/tongji550.gif";
10. imgs[2].src = "http://union.baidu.com/img/banner071031.jpg";
11. imgs[3].src = "http://union.baidu.com/img/dataunion0711.jpg";
12. imgs[4].src = "http://union.baidu.com/img/umaz13_550.jpg";
13. var tits = new
14. tits[1] ="百度统计";
15. tits[2] = "联盟杯摄影师大赛";
16. tits[3] = "百度行业报告";
17. tits[4] = "联盟志";
18.
19. var imgwidth = 550;//图片宽度
20. var imgheight = 134;//图片宽度
21.
22. var str = "<style type='text/css'>";
23. str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";
24. 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}";
25. str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";
26. str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";
27. str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";
28. str += "</style>";
29. str += "<div style='position:relative'>";
30. 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)' οnmοuseοver='Pause(true)' οnmοuseοut='Pause(false)'></a></div>";
31.
32. //修改点1:循环添加内层div内容以增加个数
33. str += "<div id='imgnv'><div id='it1' class='on' οnmοuseοver='ImgSwitch(1, true)' οnmοuseοut='Pause(false)'>1</div><div id='it2' class='off' οnmοuseοver='ImgSwitch(2, true)' οnmοuseοut='Pause(false)'>2</div><div id='it3' class='on' οnmοuseοver='ImgSwitch(3, true)' οnmοuseοut='Pause(false)'>3</div><div id='it4' class='off' οnmοuseοver='ImgSwitch(4, true)' οnmοuseοut='Pause(false)'>4</div></div>";
34. str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
35. str += "</div>";
36. document.write(str);
37.
38. var oi = document.getElementById("dimg");
39. var pause = false;
40. var curid = 1;
41. var lastid = 1;
42. var sw = 1;
43. var opacity = 100;
44. var speed = 15;
45. var delay = (document.all)? 400:700;
46.
47. function SetAlpha(){
48. if(document.all){
49. if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
50. }else{
51. oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
52. }
53. }
54.
55. function ImgSwitch(id, p){
56. if(p){
57. pause = true;
58. opacity = 100;
59. SetAlpha();
60. }
61. oi.src = imgs[id].src;
62. document.getElementById("dlink").href = links[id];
63. document.getElementById("it" + lastid).className = "off";
64. document.getElementById("it" + id).className = "on";
65. document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
66. curid = lastid = id;
67. }
68.
69. function ScrollImg(){
70. if(pause && opacity >= 100) return;
71. if(sw == 0){
72. opacity += 2;
73. if(opacity > delay){ opacity = 100; sw = 1; }
74. }
75. if(sw == 1){
76. opacity -= 3;
77. if(opacity < 10){ opacity = 10; sw = 3; }
78. }
79. SetAlpha();
80. if(sw != 3) return;
81. sw = 0;
82. curid++;
83. //修改点2:这里的4也是个数
84. if(curid > 4) curid = 1;
85. ImgSwitch(curid, false);
86. }
87.
88. function Pause(s){
89. pause = s;
90. }
91.
92. function StartScroll(){
93. setInterval(ScrollImg, speed);
94. }
95.
96. function CheckLoad(){
97. if (imgs[1].complete == true && imgs[2].complete == true) {
98. clearInterval(checkid);
99. setTimeout(StartScroll, 2000);
100. }
101. }
102.
103. var checkid = setInterval(CheckLoad, 10);
104. </script>