页面内容：一个按钮标签  一个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. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  2. vue 上拉加载更多

    var _this=this; var goods_id = _this.$route.query.id; var isscroll = true; _this.$nextTick(() => ...

  3. CKRule业务规则管理系统部署说明

    1.   程序包说明 软件是使用WinForm开发的,包含服务端和客户端,服务端部署在IIS上面,客户端可以在已经安装.Net4.0的windows上面运行. 1.1.  服务端程序包 CKBrmsS ...

  4. Android自定义验证码输入框

    未经允许,禁止

  5. Selenium2学习（九）-- 多窗口，句柄（handle）

    前言 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作,就得先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 一.认识多窗 ...

  6. QQ空间那年今日 & 人人过往的今天

    都说天下文章一大抄!就看你会抄不会抄! 过往的今天这个功能很新颖,不过最后还是被企鹅抄走了~该出手时就出手! 自从过往的今天功能低调上线后,断断续续总是有人提到这个功能,有褒有贬: 顶的认为人人让自己 ...

  7. 如何查找Fiori UI上某个字段对应的后台存储表的名称

    今天微信群里有朋友问到这个问题. 如果是SAPGUI里的事务码,比如MM01,对于开发者来说这个任务非常容易完成. 比如我想知道下图"Sales Unit"这个字段的值到底保存在哪 ...

  8. 使用 Android 客户端向 Ruby on rails 构建的 Web Application 提交 HTTP GET 和 HTTP POST 请求

    最近想弄个能访问 Internet 的 Android 应用,因为求快所以用了 Ruby on Rails 来提供 HTTP 资源.这方面的资料还是比较少的,所以把尝试的过程记录下来. 1 使用 Ru ...

  9. SP1811 【LCS - Longest Common Substring】

    \(SAM\)上匹配 我们就是需要找到两个串的最长公共子串 先对其中一个串建出\(SAM\),之后我们把另一个串放到上面跑 如果当前在\(SAM\)的状态是\(now\),下一个字符是\(c\),匹配 ...

  10. asp.net 过滤器

    asp.net 制作过滤器原理:重写ASP.net管道事件 1.通过HttpApplicationFactory创建一个HttpApplication对象,负责处理整个请求. 2.调用ProcessR ...