HTML中动态图片切换JQuery实现

相信很多同学都注意到了，各大新闻或者娱乐网站都含有动态图片切换，那个漂亮的感觉让刚刚学习html的人，都非常好奇和心动。那下面就让我们看一下到底如何实现动态图片切换呢？看一下百度贴吧的效果图吧~

1. //JavaScriptDocument
2. vart=count=n=0;
3. $(function(){
4. $(".big_imga:not(:first)").hide();
5. $(".link_nava:not(:first)").hide();
6. $num_nav=$(".num_navspan");
7. $big_img=$(".big_imga");
8. count=$big_img.length;
9. t=setInterval("showAuto()",3000);
11. $num_nav.click(function(){
12. varnum_nav=$(".num_navspan").index(this);
13. $(this).addClass("selected").siblings().removeClass("selected");
14. $big_img.filter(":visible").fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
15. $(".link_nava").filter(":visible").fadeOut(500).parent().children().eq(num_nav).fadeIn(1000);
16. });
17. $(".img_nav").hover(function(){clearInterval(t)},function(){t=setInterval("showAuto()",3000);});
18. })
20. functionshowAuto()
21. {
22. n=n>=2?0:(n+1);
23. $num_nav.eq(n).trigger('click');
24. }

1. /*!
2. *jQueryJavaScriptLibraryv1.3.1
3. *http://jquery.com/
4. *
5. *Copyright(c)2009JohnResig
6. *DuallicensedundertheMITandGPLlicenses.
7. *http://docs.jquery.com/License
8. *
9. *Date:2009-01-2120:42:16-0500(Wed,21Jan2009)
10. *Revision:6158
11. */
12. (function(){
14. var
15. //WillspeeduPReferencestowindow,andallowsmungingitsname.
16. window=this,
17. //Willspeedupreferencestoundefined,andallowsmungingitsname.
18. undefined,
19. //MapoverjQueryincaSEOfoverwrite
20. _jQuery=window.jQuery,
21. //Mapoverthe$incaseofoverwrite
22. _$=window.$,
24. jQuery=window.jQuery=window.$=function(selector,context){
25. //ThejQueryobjectisactuallyjusttheinitconstructor'enhanced'
26. returnnewjQuery.fn.init(selector,context);
27. },
29. //AsimplewaytocheckforHTMLstringsorIDstrings
30. //(bothofwhichweoptimizefor)
31. quickExpr=/^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/,
32. //Isitasimpleselector
33. isSimple=/^.[^:#\[\.,]*$/;
35. jQuery.fn=jQuery.prototype={
36. init:function(selector,context){
37. //Makesurethataselectionwasprovided
38. selector=selector||document;
40. //Handle$(DOMElement)
41. if(selector.nodeType){
42. this[0]=selector;
43. this.length=1;
44. this.context=selector;
45. returnthis;
46. }
47. //HandleHTMLstrings
48. if(typeofselector==="string"){
49. //ArewedealingwithHTMLstringoranID?
50. varmatch=quickExpr.exec(selector);
52. //Verifyamatch,andthatnocontextwasspecifiedfor#id
53. if(match&&(match[1]||!context)){
55. //HANDLE:$(html)->$(array)
56. if(match[1])
57. selector=jQuery.clean([match[1]],context);
59. //HANDLE:$("#id")
60. else{
61. varelem=document.getElementById(match[3]);
63. //HandlethecasewhereIEandOperareturnitems
64. //bynameinsteadofID
65. if(elem&&elem.id!=match[3])
66. returnjQuery().find(selector);
68. //Otherwise,weinjecttheelementdirectlyintothejQueryobject
69. varret=jQuery(elem||[]);
70. ret.context=document;
71. ret.selector=selector;
72. returnret;
73. }
75. //HANDLE:$(expr,[context])
76. //(whichisjustequivalentto:$(content).find(expr)
77. }else
78. returnjQuery(context).find(selector);
80. //HANDLE:$(function)
81. //Shortcutfordocumentready
82. }elseif(jQuery.isFunction(selector))
83. returnjQuery(document).ready(selector);
85. //Makesurethatoldselectorstateispassedalong
86. if(selector.selector&&selector.context){
87. this.selector=selector.selector;
88. this.context=selector.context;
89. }
91. returnthis.setArray(jQuery.makeArray(selector));
92. },
94. //Startwithanemptyselector
95. selector:"",
97. //ThecurrentversionofjQuerybeingused
98. jquery:"1.3.1",
100. //Thenumberofelementscontainedinthematchedelementset
101. size:function(){
102. returnthis.length;
103. },
105. //GettheNthelementinthematchedelementsetOR
106. //Getthewholematchedelementsetasacleanarray
107. get:function(num){
108. returnnum===undefined?
110. //Returna'clean'array
111. jQuery.makeArray(this):
113. //Returnjusttheobject
114. this[num];
115. },
117. //Takeanarrayofelementsandpushitontothestack
118. //(returningthenewmatchedelementset)
119. pushStack:function(elems,name,selector){
120. //BuildanewjQuerymatchedelementset
121. varret=jQuery(elems);
123. //Addtheoldobjectontothestack(asareference)
124. ret.prevObject=this;
126. ret.context=this.context;
128. if(name==="find")
129. ret.selector=this.selector+(this.selector?"":"")+selector;
130. elseif(name)
131. ret.selector=this.selector+"."+name+"("+selector+")";
133. //Returnthenewly-formedelementset
134. returnret;
135. },
137. //Forcethecurrentmatchedsetofelementstobecome
138. //thespecifiedarrayofelements(destroyingthestackintheprocess)
139. //YoushouldusepushStack()inordertodothis,butmaintainthestack
140. setArray:function(elems){
141. //Resettingthelengthto0,thenusingthenativeArraypush
142. //isasuper-fastwaytopopulateanobjectwitharray-likeproperties
143. this.length=0;
144. Array.prototype.push.apply(this,elems);
146. returnthis;
147. },
149. //Executeacallbackforeveryelementinthematchedset.
150. //(Youcanseedtheargumentswithanarrayofargs,butthisis
151. //onlyusedinternally.)
152. each:function(callback,args){
153. returnjQuery.each(this,callback,args);
154. },
156. //Determinethepositionofanelementwithin
157. //thematchedsetofelements
158. index:function(elem){
159. //Locatethepositionofthedesiredelement
160. returnjQuery.inArray(
161. //IfitreceivesajQueryobject,thefirstelementisused
162. elem&&elem.jquery?elem[0]:elem
163. ,this);
164. },
166. attr:function(name,value,type){
167. varoptions=name;
169. //Lookforthecasewherewe'reaccessingastylevalue
170. if(typeofname==="string")
171. if(value===undefined)
172. returnthis[0]&&jQuery[type||"attr"](this[0],name);
174. else{
175. options={};
176. options[name]=value;
177. }
179. //Checktoseeifwe'resettingstylevalues
180. returnthis.each(function(i){
181. //Setallthestyles
182. for(nameinoptions)
183. jQuery.attr(
184. type?
185. this.style:
186. this,
187. name,jQuery.prop(this,options[name],type,i,name)
188. );
189. });
190. },
192. CSS:function(key,value){
193. //ignorenegativewidthandheightvalues
194. if((key=='width'||key=='height')&&parseFloat(value)<0)
195. value=undefined;
196. returnthis.attr(key,value,"curCSS");
197. },
199. text:function(text){
200. if(typeoftext!=="object"&&text!=null)
201. returnthis.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(text));
203. varret="";
205. jQuery.each(text||this,function(){
206. jQuery.each(this.childNodes,function(){
207. if(this.nodeType!=8)
208. ret+=this.nodeType!=1?
209. this.nodeValue:
210. jQuery.fn.text([this]);
211. });
212. });
214. returnret;
215. },
217. wrapAll:function(html){
218. if(this[0]){
219. //Theelementstowrapthetargetaround
220. varwrap=jQuery(html,this[0].ownerDocument).clone();
222. if(this[0].parentNode)
223. wrap.insertBefore(this[0]);
225. wrap.map(function(){
226. varelem=