jQuery实现企业网站横幅焦点图切换功能实例

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <title>jQuery淡出淡入带缩略图幻灯片</title> 
6. <script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
7. <style> 
8. .flashBanner{width:782px;height:326px; 
9. overflow:hidden;margin:0 auto; 
10. } 
11. .flashBanner{position:relative;} 
12. .flashBanner .mask{height:32px;line-height:32px; 
13. background-color:#000;width:100%; 
14. text-align:right;position:absolute;left:0; 
15. bottom:-32px;filter:alpha(opacity=70); 
16. -moz-opacity:0.7;opacity:0.7;overflow:hidden; 
17. } 
18. .flashBanner .mask img{ 
19. vertical-align:middle; 
20. margin-right:10px; 
21. cursor:pointer; 
22. } 
23. .flashBanner .mask img.show{margin-bottom:3px;} 
24. </style> 
25. <script type="text/javascript"> 
26. $(function(){ 
27. $(".flashBanner").each(function(){ 
28. var timer; 
29. $(".flashBanner .mask img").click(function(){ 
30. var index = $(".flashBanner .mask img").index($(this)); 
31.  
32. changeImg(index); 
33. }).eq(0).click(); 
34. $(this).find(".mask").animate({ 
35. "bottom":"0" 
36. },700); 
37. $(".flashBanner").hover(function(){ 
38. clearInterval(timer); 
39.  
40. },function(){ 
41. timer = setInterval(function(){ 
42. var show = $(".flashBanner .mask img.show").index(); 
43. if (show >= $(".flashBanner .mask img").length-1) 
44. show = 0; 
45. else 
46. show ++; 
47. changeImg(show); 
48. },3000); 
49. }); 
50. function changeImg (index) 
51. { 
52. $(".flashBanner .mask img").removeClass("show").eq(index).addClass("show"); 
53. $(".flashBanner .bigImg").parents("a").attr("href",$(".flashBanner .mask img").eq(index).attr("link")); 
54. $(".flashBanner .bigImg").hide().attr("src",$(".flashBanner .mask img").eq(index).attr("uri")).fadeIn("slow"); 
55. } 
56. timer = setInterval(function(){ 
57. var show = $(".flashBanner .mask img.show").index(); 
58. if (show >= $(".flashBanner .mask img").length-1) 
59. show = 0; 
60. else 
61. show ++; 
62. changeImg(show); 
63. },3000); 
64. }); 
65. }); 
66. </script> 
67. </head> 
68. <body> 
69. <div class="flashBanner"> 
70. <a href="/"><img class="bigImg" width="782" height="326" /></a> 
71. <div class="mask"> 
72. <img src="11.jpg" uri="11.jpg" link="/" width="60" height="22"/> 
73. <img src="22.jpg" uri="22.jpg" link="/" width="60" height="22"/> 
74. <img src="33.jpg" uri="33.jpg" link="/" width="60" height="22"/> 
75. <img src="44.jpg" uri="44.jpg" link="/" width="60" height="22"/> 
76. <img src="55.jpg" uri="55.jpg" link="/" width="60" height="22"/> 
77. </div> 
78. </div> 
79. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> 
80. </div> 
81. </body> 
82. </html>