JavaScript图片轮播代码分享

这篇文章主要介绍了javascript实现图片自动轮播切换特效,图片可以自行替换，推荐给大家，有需要的小伙伴可以参考下。

为大家分享的JavaScript图片轮播代码如下

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2. <html xmlns="http://www.w3.org/1999/xhtml"> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5. <title>无标题文档</title> 
6. <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 
7.  
8. <style> 
9.  
10. .img-div img{display:none;} 
11.  
12. </style> 
13. </head> 
14.  
15. <body> 
16.  
17. <div class="slide" id="slide"> 
18. <div class="img-div"> 
19. <img src="model.jpg" /> 
20. <img src="model2.jpg" /> 
21. <img src="model.jpg" /> 
22. <img src="model2.jpg" /> 
23. <img src="model.jpg" /> 
24. </div> 
25.  
26. <div class="slide-btn"> 
27. <a href="#" class="hover">1</a> 
28. <a href="#" class="hover">2</a> 
29. <a href="#" class="hover">3</a> 
30. <a href="#" class="hover">4</a> 
31. <a href="#" class="hover">5</a> 
32. </div> 
33.  
34. </div> 
35.  
36. <script type="text/javascript"> 
37.  
38.  
39. var zBase= 
40. { 
41. $id:function(id){return document.getElementById(id);}, 
42. $tagName:function(tagName,obj){return ((obj?obj:document).getElementsByTagName(tagName));}, 
43. $c:function(clsN,obj) 
44. { 
45. var tag=this.$tagName('*'),reg=new RegExp('(^|//s)'+clsN+'(//s|$)'),arr=[]; 
46.  
47. for(var i=0;i<tag.length;i++) 
48. { 
49. if(reg.test(tag[i].className)) 
50. { 
51. arr.push(tag[i]);  
52. }  
53. } 
54. return arr; 
55.  
56. }, 
57.  
58. $add:function(obj,clsN) 
59. { 
60. var reg=new RegExp('(^|//s)'+clsN+'(//s|$)'); 
61.  
62. if(!reg.test(obj.className)) 
63. { 
64. obj.className+=' '+clsN;  
65. }  
66. }, 
67.  
68. $remove:function(obj,clsN) 
69. { 
70. var cla=obj.className; 
71. var reg='/|//s*'+clsN+'//b/g'; 
72. obj.className=cla?cla.replace(eval(reg),''):'';  
73. }, 
74.  
75. css:function(obj,attr,value) 
76. { 
77. if(value) 
78. { 
79. obj.style[attr]=value;  
80. }  
81. else 
82. { 
83. return typeof window.getComputedStyle!="undefined"?window.getComputedStyle(obj,null)[attr]:obj.currentStyle[attr];  
84. } 
85. }, 
86. easing: 
87. { 
88. liner:function(t,b,c,d){return c*t/d+b}, 
89. easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t-1)+b} 
90. }, 
91.  
92. config: 
93. { 
94. index:0, 
95. auto:true, 
96. direct:'left'  
97. }, 
98.  
99. init:function() 
100. { 
101. this.slide=this.$id('slide'); 
102. this.img_div=this.$c('img-div')[0]; 
103. this.slide_btn=this.$tagName('a',this.$c('slide-btn')[0]); 
104. this.img_arr=this.$tagName('img',this.img_div); 
105.  
106.  
107.  
108. if(this.config.auto){this.play();} 
109. this.hover(); 
110.  
111. }, 
112.  
113. animate:function(obj,attr,val) 
114. { 
115. var d=1000; 
116.  
117. if(obj[attr+"timer"]){clearInterval(obj[attr+"timer"])}; 
118.  
119. var start= parseInt(zBase.css(obj,attr)); 
120. var space=val-start,st=(new Date().getTime()),m=space>0?'cell':'floor'; 
121.  
122. obj[attr+'timer']=setInterval(function(){ 
123. var t=(new Date().getTime()-st); 
124. if(t<d) 
125. { 
126.  
127. zBase.css(obj,attr,Math[m](zBase.easing["easeOut"](t,start,space,d))+"px"); 
128. } 
129. else 
130. { 
131. clearInterval(obj[attr+'timer']); 
132. zBase.css(obj,attr,top+space+"px"); 
133. }  
134. },20); 
135.  
136.  
137. }, 
138.  
139. hover:function() 
140. { 
141. for(var i=0;i<this.slide_btn.length;i++) 
142. { 
143. this.slide_btn[i].index=i; 
144. this.slide_btn[i].onmouseover=function() 
145. { 
146. if(zBase.slide.timer) 
147. { 
148. clearInterval(zBase.slide.timer);  
149. }  
150.  
151. zBase.config.index=this.index; 
152.  
153.  
154. //console.log(this.slide_btn); 
155.  
156. for(var j=0;j<zBase.slide_btn.length;j++) 
157. { 
158. zBase.$remove(zBase.slide_btn[j],'hover'); 
159.  
160. } 
161.  
162. zBase.$add(zBase.slide_btn[zBase.config.index],'hover'); 
163. zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*1000); 
164.  
165. } 
166.  
167. this.slide_btn[i].onmouseout=function() 
168. { 
169. zBase.play();  
170. } 
171. } 
172.  
173. }, 
174. play:function(){ 
175. this.slide.timer = setInterval(function(){ 
176.  
177. var tags=zBase.$tagName('img',this.img_div); 
178. //zBase.$tagName('img',this.img_div)[zBase.config.index].style.display="block"; 
179.  
180.  
181. for(var i =0;i<tags.length;i++) 
182. { 
183. if(zBase.config.index==i) 
184. { 
185. zBase.$tagName('img',this.img_div)[zBase.config.index].style.display="block"; 
186. }  
187. else 
188. { 
189. zBase.$tagName('img',this.img_div)[i].style.display="none";  
190. } 
191. } 
192.  
193.  
194. zBase.config.index++; 
195. if(zBase.config.index>=zBase.img_arr.length) zBase.config.index=0; 
196. zBase.animate(zBase.img_div,zBase.config.direct,-zBase.config.index*500); 
197. for(var j=0;j<zBase.slide_btn.length;j++){ 
198. zBase.$remove(zBase.slide_btn[j],'hover') ; 
199. } 
200. zBase.$add(zBase.slide_btn[zBase.config.index],'hover'); 
201. },3000) 
202. } 
203.  
204. } 
205. zBase.init(); 
206.  
207. </script> 
208.  
209. </body> 
210. </html> 

以上就是为大家分享的JavaScript图片轮播代码，希望大家可以喜欢。