jquery简单实现图片切换效果的方法

这篇文章主要介绍了jquery简单实现图片切换效果的方法,涉及jQuery链式操作及图片操作的相关技巧,需要的朋友可以参考下

本文实例讲述了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. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
6. <title>无标题文档</title> 
7. <style type="text/css"> 
8. #slider{ 
9. position:relative; 
10. overflow:hidden; 
11. margin:20px auto; 
12. height:240px; 
13. width:740px; 
14. padding:5px; 
15. border:2px solid #cdcdcd; 
16. } 
17. #show{ 
18. position:relative; 
19. height:240px;  
20. width:740px; 
21. } 
22. #show .img{ 
23. width:740px; 
24. height:240px; 
25. margin-bottom:5px; 
26. } 
27. #num{ 
28. position:absolute; 
29. right:5px; 
30. top:220px; 
31. } 
32. #num span{ 
33. float:left; 
34. display:block; 
35. text-align:center; 
36. width:20px; 
37. height:20px; 
38. line-height:20px; 
39. margin:2px; 
40. font-family:Arial, Helvetica, sans-serif; 
41. font-size:14px; 
42. font-weight:blod; 
43. background:#f2f2f2; 
44. border:1px solid #D78918; 
45. color:#D78918; 
46. } 
47. #num .current{ 
48. color: #fff; 
49. width:21px; 
50. height:21px; 
51. line-height:21px; 
52. font-size: 16px; 
53. border:0px; 
54. margin:0px 1px; 
55. background-color: #FF7300; 
56. } 
57. </style> 
58. <script src="js/jquery-1.3.1.js" type="text/javascript"></script> 
59. <script type="text/javascript"> 
60. <!-- 
61. $(function(){ 
62. var count=1; 
63. setInterval(function(){ 
64. count=count==5?0:count; 
65. var top=-count*(240+5); 
66. count++; 
67. $("#show").animate({top:top},600); 
68. $("#num").find("span").eq(count-1).addClass("current").siblings().removeClass("current"); 
69. },2000); 
70. }) 
71. --> 
72. </script> 
73. </head> 
74. <body> 
75. <div id="slider"> 
76. <div id="show"> 
77. <div class="img" style="background:red;"></div> 
78. <div class="img" style="background:blue"></div> 
79. <div class="img" style="background:gold"></div> 
80. <div class="img" style="background:yellow"></div> 
81. <div class="img" style="background:green"></div> 
82. </div> 
83. <div id="num"> 
84. <span class="current">1</span> 
85. <span>2</span> 
86. <span>3</span> 
87. <span>4</span> 
88. <span>5</span> 
89. </div> 
90. </div> 
91. </body> 
92. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。