页面内容：一个按钮标签 一个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