码迷,mamicode.com
首页 > Web开发 > 详细

js简单图片切换

时间:2017-09-20 23:15:11      阅读:325      评论:0      收藏:0      [点我收藏+]

标签:value   view   fun   pen   gif   htm   ges   div   com   

技术分享
 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简单图片切换

标签:value   view   fun   pen   gif   htm   ges   div   com   

原文地址:http://www.cnblogs.com/LCH-M/p/7565391.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!