页面内容：一个按钮标签  一个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. [转]滚动视差？CSS 不在话下/background attachment

      何为滚动视差 视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 作为网页设计的热点趋势,越来越多的网站应用了这项技术. ...

  2. easyui datagrid 获取行数据某个字段

    首先要能获取datagrid 的row对象 即:var row = $('#datagrid').datagrid('getData').rows[index]; 之后我们就可以通过类似row.nam ...

  3. 21_AOP_Advice增强2（异常、引介）

    [异常抛出增强] 异常抛出异常最适合的应用场景:事务管理. 当参与事务的某个Dao发生异常时,事务管理器就必须回滚事务. [异常抛出增强 例子] [操作数据库的Dao类:PersonDao.java] ...

  4. Android应用开发详解

    目录结构 1.Android概述 2.Android开发基础 未完待续……

  5. constructor()方法

    在做微信小程序的时候,需要对传输的数据进行加密,大牛给我介绍constructor()方法,不是很懂这个但是用了一次,今天来用自己的想法来理解这个方法 ———————————————————————— ...

  6. HCNA配置静态LACP模式链路聚合

    1.静态LACP模式 静态LACP模式是一种利用LACP协议进行聚合参数协商.确定活动接口和非活动接口的链路聚合方式.该模式下,需手工创建Eth-Trunk,手工加入Eth-Trunk成员接口,由LA ...

  7. A full JDK must be specified

    当你开发就了,你就发现,你遇到了各种奇葩的问题,结果,自己奇葩了. 背景:由于项目需要做安全恢复测试,然后,就搭一个新的库环境去测试: 配置jboss的运行jdk时,结果,蹦出个:A full JDK ...

  8. Orchard Core 文档翻译 （四）CMS ModulesTitle (OrchardCore.Title)

    Title (OrchardCore.Title) 标题模块提供Title Part ,允许用户定义内容项的标题.它还定义了ContentItemMetadata方面的DisplayText属性 Th ...

  9. 【转】ssh timed out 超时解决方案

    转自:http://www.cnblogs.com/niutouzdq/p/4091268.html 在使用阿里云ECS服务器的时候,winsftp经常被服务器断开,想必是过一会没有操作,防火墙喜欢对 ...

  10. android-ndk-r7b编译环境Cygwin工具搭建及配置（转）

    开发android ndk 的时候需要一个编译工具编译c程序,ndk需要linux下编译,所以win环境下提供Cygwin模拟linux编译C android-ndk 较低版本的这个工具的配置网上很多 ...