JavaScript实现图片切换

最新推荐文章于 2022-04-27 20:57:11 发布

de7439

最新推荐文章于 2022-04-27 20:57:11 发布

阅读量190

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/WangYujie1994/p/10231806.html

版权

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

转载于:https://www.cnblogs.com/WangYujie1994/p/10231806.html

de7439

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现图片切换

页面内容：一个按钮标签一个Img标签实现原理：通过修改Img标签的src属性，实现图片的切换备注：代码中flag变量仅仅用作标记，也可以直接用Img标签的src属性进行判断，不过在判断时候不能直接写成　　　　pics.src=='img/b.jpg';，需要加入当前域名本博文只是一个简单的实现逻辑，在大型网站中使用方法还没深究，小白一个，才开始接触前端开发，希望能...
复制链接

扫一扫