页面内容：一个按钮标签  一个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. css3总结之居中

    居中在前端布局上很常见,也很常用,也是最基本的技巧.居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中. 针对调整的元素不同,具体的处理方式上有些差异.这里我们先不讲绝对定位下的居中, ...

  2. input文本框点击第一次光标在最右边

    效果: 样式效果引入bootstrap4.0就OK了. HTML代码: <div class="input-group w-25"> <div class=&qu ...

  3. 超级简单的jQuery纯手写五星评分效果

    超级简单的评分功能,分为四个步骤轻松搞定: 第一步: 引入jquery文件:这里我用百度CDN的jquery: <script src="http://apps.bdimg.com/l ...

  4. .NET开源工作流RoadFlow-表单设计-隐藏域

    隐藏域即<input type="hidden" value=""/>标签:

  5. 【Linux】Core dump故障分析

    引入: Q:如果一个程序运行3天后才会出错,这个时候难道需要我们一直用GDB调试程序3天吗? A:答案当然是否定的. 我们有更厉害的工具--Core dump 一.Coredump定义 Core Du ...

  6. 【HTML5】HTML5 综合

    HTML5教程: 视频教程:http://www.socss.cn/html5视频教程大集合/ DCloud关于HTML5:http://ask.dcloud.net.cn/docs 开发工具:HBu ...

  7. Winform中 DataGridView控件中的 CheckBox 的值读出来 始终 为 False ,已解决

    private void DGV_DetailsViewer_CellContentClick(object sender, DataGridViewCellEventArgs e) { )) { D ...

  8. Python3条件控制语句

    Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. if语句 if 条件: 代码块 elif 条件: 代码块 else: 代码块 python中用elif ...

  9. CRM中间件里的CSA队列有什么用

    我们有时候会在中间件的事务码SMQ2即Inbound队列查看器里观察到以CSA开头的队列: 这些队列的作用是什么呢?在SAP community上已经有很多朋友提出了相同的问题,也有专家在下列两个连接 ...

  10. python_列表/元组/元组列表以及如何使用

    1.list是处理一组有序项目的数据结构 #定义一个列表 list=[1,2,3] print type(list) print list[0] 输出: <type 'list'> 1 2 ...