JavaScript实现图片切换

页面内容：一个按钮标签一个Img标签

实现原理：通过修改Img标签的src属性，实现图片的切换

备注：代码中flag变量仅仅用作标记，也可以直接用Img标签的src属性进行判断，不过在判断时候不能直接写成

　　　　pics.src=='img/b.jpg';，需要加入当前域名

本博文只是一个简单的实现逻辑，在大型网站中使用方法还没深究，

小白一个，才开始接触前端开发，希望能找到更多大神一起交流，给我指导。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>图像切换源码</title>
 6     </head>
 7     <body>
 8         <button type="button" id="toggle">点我</button><br/>
 9         <img src="img/a.jpg" id="pic" width="400px" height="300px">
10         
11         <!-- 现在开始给“点我”按钮注册事件 -->
12         <script type="text/javascript">
13             //1.获取按钮元素
14             var btn=document.getElementById('toggle');
15             
16             //获取图片元素,只要对其src属性修改就可以改变图片
17             //pics.src就是图片的路径,因为DOM获取图片元素的时候,将图片的属性和方法都已经封存在元素内部,修改元素,就是修改图片元素
18             var pics=document.getElementById('pic');
19             
20             
21             //2.给按钮注册事件
22             console.log(typeof(pics.src));
23             var flag=1;
24             btn.onclick=function(){
25                 //事件名:click
26                 //注册事件:onclick
27                 //备注:事件不是函数和方法,所以不需要加括号
28                 //3.切换图片
29                 if(flag==1){
30                     pics.src='img/b.jpg';
31                     flag=2;
32                 }
33                 else{
34                     pics.src='img/a.jpg';
35                     flag=1;
36                 }
37             }
38             
39         </script>
40     </body>
41 </html>

页面效果如下：

页面1

页面2

图片、jQuery资料下载地址：QQ群694406023（百度云资料太浪费内存了~~~~~~~~）备注：一般代码中总会引入JQuery包，复制代码过程中请注意。用到的外部包文件群文件中都已上传。