JavaScript实现图片切换 |
您所在的位置：网站首页 › javascript切换图片 › JavaScript实现图片切换 |
JavaScript实现图片切换
|
页面内容：一个按钮标签 一个Img标签 实现原理：通过修改Img标签的src属性，实现图片的切换 备注：代码中flag变量仅仅用作标记，也可以直接用Img标签的src属性进行判断，不过在判断时候不能直接写成 pics.src=='img/b.jpg';，需要加入当前域名 本博文只是一个简单的实现逻辑，在大型网站中使用方法还没深究， 小白一个，才开始接触前端开发，希望能找到更多大神一起交流，给我指导。 1 2 3 4 5 图像切换源码 6 7 8 点我 9
10
11
12
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
40
41
页面效果如下：
页面1
页面2 |
【本文地址】
今日新闻 |
推荐新闻 |