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

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

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

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

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

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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>图像切换源码</title>

     </head>

     <body>

         <button type="button" id="toggle">点我</button><br/>

         <img src="img/a.jpg" id="pic" width="400px" height="300px">

         <!-- 现在开始给“点我”按钮注册事件 -->

         <script type="text/javascript">

             //1.获取按钮元素

             var btn=document.getElementById('toggle');

             //获取图片元素,只要对其src属性修改就可以改变图片

             //pics.src就是图片的路径,因为DOM获取图片元素的时候,将图片的属性和方法都已经封存在元素内部,修改元素,就是修改图片元素

             var pics=document.getElementById('pic');

             //2.给按钮注册事件

             console.log(typeof(pics.src));

             var flag=1;

             btn.onclick=function(){

                 //事件名:click

                 //注册事件:onclick

                 //备注:事件不是函数和方法,所以不需要加括号

                 //3.切换图片

                 if(flag==1){

                     pics.src='img/b.jpg';

                     flag=2;

                 }

                 else{

                     pics.src='img/a.jpg';

                     flag=1;

                 }

             }

         </script>

     </body>

 </html>

页面效果如下：

页面1

页面2

JavaScript实现图片切换的更多相关文章

  1. javascript实现图片切换、自动走、鼠标移入会停止，移出继续走

    要实现以上效果并不难,把功能分开一步一步来实现就变得简单了,录制动态图不流畅,看代码意会吧! <!doctype html> <html lang="en"> ...

  2. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. jquery图片切换插件jquery.cycle.js参数详解

    转自:国人的力量 blog.163.com/xz551@126/blog/static/821257972012101541835491/ 自从使用了jquery.cycle.js,我觉得再也不用自己 ...

  4. JavaScript 最简单的图片切换

    使用前在文件外部要有1.jpg 2.jpg 只是简单的模仿flash图片切换,可在此基础上引申出各种不同的效果. 思路: 建立一个数组存放图片的src,然后调用setInterval周期性的调用cha ...

  5. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  6. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

  7. Javascript:一款简易的图片切换插件

    最近迷上javascript,每天不写点什么都不舒服哈~ 尽管自己能力有限,还是尽自己所能写点东西出来. 实现效果: 效果预览:http://codepen.io/anon/pen/BNjxXj 该插 ...

  8. 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  9. HTML-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

随机推荐

  1. 让div跟按键走，基本键码

    ---恢复内容开始--- 想要快速的做这样一个简单效果,首先要明白它的原理; 样式设置的重点,就是要跟上次拖拽一样,给该元素绝对定位, 事件就是onkeydown,事件,通过判断键码,来执行: < ...

  2. 从虚拟机角度看Java多态->（重写override）的实现原理

    工具与环境:Windows 7 x64企业版Cygwin x64jdk1.8.0_162 openjdk-8u40-src-b25-10_feb_2015Vs2010 professional 0x0 ...

  3. 任务六：通过HTML及CSS模拟报纸排版

    任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...

  4. XP无法访问SharePoint 2010的问题

    最近用户反馈XP系统的电脑无法访问SharePoint 2010系统,换成了火狐浏览器后可以正常访问,但是在上传附件时出现异常,支持人员给的解决方案是换操作系统,要换成win7. 但是因为工作原因,不 ...

  5. zookeeper的JavaAPI

    org.apache.zookeeper.Zookeeper Zookeeper 是在 Java 中客户端主类,负责建立与 zookeeper 集群的会话,并提供方法进行操作. org.apache. ...

  6. web Worker基本使用

    web worker 使用 web worker 是现代浏览器具有的可以处理密集型任务非常便利的解决方案,众所周知,JavaScript是单线程的(一个JavaScript引擎实例只能占用一个线程,线 ...

  7. jquery在IE8上使用find的问题

    有一个字符串,其中是一个XML文件的内容,但是使用find方法老是不正确(IE8,其他浏览器如Chrome.Firefox),代码如下: var xml="<ServiceResult ...

  8. 《3D打印：从想象到现实》：基本没发现独到之处

    本书汇总了3D打印的相关咨询:原理.可能的或已经实现的应用.商业模式等等.由于3D打印是最近媒体上比较热的信息,对我来说书中的大部分内容都没有独到之处,都是已知的.

  9. June 11th 2017 Week 24th Sunday

    I hope I can find the one who is afraid of losing me. 我希望找到一个担心失去我的人. When I was young, sometimes I ...

  10. pip pip._vendor.urllib3.exceptions.ReadTimeoutError: HTTPSConnectionPool

    设置超时时间: pip --default-timeout=100 install  Pillow