js简单图片切换

Posted 勤能补拙

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js简单图片切换相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8"/>
 5         
 6         <title>
 7 
 8         </title>
 9         
10     </head>
11         <style>
12             #zp img{
13                 margin:0 auto;
14             }
15         </style>
16     <body>
17         <div id="zp">
18         <img src="iamges/46.png" width="300" height="200" id="img1"/>
19         </div>
20         
21         <input type="button" value="上一张" onclick="sz()"/>
22         
23         <input type="button" value="下一张" onclick="xz()"/>
24     </body>
25     
26     <script type="text/javascript">
27             var picArr=new Array("iamges/46.png","iamges/47.png","iamges/48.png","iamges/49.png","iamges/50.png");
28             
29             var xp=0;
30             
31             function sz(){
32                 
33                 xp++;
34                 if(xp==picArr.length){
35                     xp=0;
36                 }
37                 document.getElementById("img1").src=picArr[xp];
38             }
39             
40             function xz(){
41                     xp--;
42                     if(xp<0){
43                         xp=picArr.length-1;
44                     }
45                     document.getElementById("img1").src=picArr[xp];
46             }
47         </script>
48 </html>
View Code

效果图

 

以上是关于js简单图片切换的主要内容，如果未能解决你的问题，请参考以下文章

JS函数传参实例应用：多组图片切换实例

jQuery图片切换插件jquery.cycle.js

原生js解决图片点击左右切换（简单轮播图）

jQuery图片切换插件jquery cycle js

js实现效果：循环轮播图

js简单图片切换