JavaScript实现图片轮播的方法

这篇文章主要介绍了JavaScript实现图片轮播的方法,使用纯javascript实现图片轮播切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JavaScript实现图片轮播的方法。分享给大家供大家参考。具体如下：

这里没有使用到JQUERY，没有过渡效果，图片可自行替换 。

test2.html页面：

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

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