页面内容：一个按钮标签  一个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. 用JQ帮你实现动画导航 手风琴是导航与下拉导航

    1.手风琴式导航,既可以适用于移动端也可使用与PC端 <!DOCTYPE html> <html> <head> <meta charset="UT ...

  2. 超级表格：要山寨Excel，还是与之Say Byebye？

    创业产品难免被人拿来与现有的知名产品比较,创业者也喜欢把自己的产品与现有的知名产品比较. 我,超级表格创始人,对此有话说. 当我要在各种场合描述超级表格是什么时,也纠结过. 向用户描述时,说超级表格类 ...

  3. Shader Example

    //测试viewDir对顶点的影响Shader "Example/TestViewDir" { Properties{ _RimColor("Rim Color" ...

  4. Python单元测试框架unittest使用方法讲解

    这篇文章主要介绍了Python单元测试框架unittest使用方法讲解,本文讲解了unittest概述.命令行接口.测试案例自动搜索.创建测试代码.构建测试套件方法等内容,需要的朋友可以参考下   概 ...

  5. ARM 虚拟机使用同一个公共 IP 访问公网的解决方案

    ARM 虚拟机使用同一个公共 IP 访问公网的解决方案 2017-2-21 作者 Azure 目前有两种部署模型:资源管理器 ARM 和经典部署模型 ASM.ASM 的虚拟机默认公用云服务的 VIP ...

  6. Hadoop ->> Name node/Data node和Job tracker/Task tracker的区别

    刚好看到关于Name node/Data node和Job tracker/Task tracker的解释,一开始有点混淆,以为说Job tracker必须运行在Name node上,他们俩有依赖或者 ...

  7. win7 下vs2008试用版破解

    用过微软的开发套件Visual Studio 2008,如果用的是试用版本,超过90天,就会过期,出现下面这张图片显示的 下面介绍破解的步骤: 1.首先打开控制面板——然后找到卸载或更改程序——然后找 ...

  8. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

  9. KMP算法的工作流程介绍

    最近又想起了KMP算法,原来一直没搞明白工作原理,现在总算是开点窍了,推荐大家看这篇文章,写的很简单易懂 推荐理由:简单明了,是我看过介绍KMP算法流程的所有文章中,最易懂的一篇(这篇文章仅仅是介绍了 ...

  10. OC 构造方法

    #import <Foundation/Foundation.h> @interface Student : NSObject { int _age; int _no; } - (void ...