今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码,

我先说一下要求,

1.有两个按钮,内容为显示,和换,

2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来

3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来,

4.当图片隐藏的时候,图片不可变换

这就是要求,下面来看代码:

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>换图片</title>

 </head>

 <body>

 <button id="btn">隐藏</button>

 <button id="btu">换</button>

 <img src="11.jpg" id="img" width="300px" />

 </body>

 <script>

 var btn = document.getElementById("btn");

 var btu = document.getElementById("btu");

 var img = document.getElementById("img");

     var xia = 0;

     btn.addEventListener("click",function (){

                     //判断按钮文字内容

         if(btn.innerText == "隐藏"){

                         //当按钮文字为隐藏时,图片隐藏

                  img.style.opacity = 0;

                         //同时,按钮文字变成现实   下面同理

             btn.innerText = "显示";

         }else{

             img.style.opacity = 1;

             btn.innerText = "隐藏";

         }

     });

     var imgs = ["11.jpg","12.jpg"];

         //给"换"添加点击事件

     btu.addEventListener("click",function (){

             if(btn.innerText == "隐藏"){

                 if(xia < 1){

                     xia++;

                 }else{

                     xia = 0;

                 }

             img.src = imgs[xia];

         }else{

             alert("图片隐藏，不能切换");

         }

 });

 </script>

 </html>

就是这么简单,你们学会了吗???

JS原生隐藏显示图片,点击切换图片的效果的更多相关文章

  1. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  2. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  3. 22.用demo通过点击切换图片路径

    用demo通过点击切换图片路径 html: <img src="images/driving.png" class="driving"/> js: ...

  4. 利用DOM的方式点击切换图片及修改文字

    本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...

  5. 【JavaScript】修改图片src属性切换图片

    今天做项目时其中一个环节需要用到js修改图片src属性切换图片,现在来记录一下 以下是示例: html <img src="/before.jpg" id="img ...

  6. swiper.js在隐藏/显示切换时，轮播出现bug的解决办法

    swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以 ...

  7. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  8. js实现图片点击弹出放大效果

    点击图片,显示蒙板,放大图片的简单案例 HTML代码: <div> <img height=" src="https://img-blog.csdn.net/20 ...

  9. 设置UIButton的文字居右显示 去掉点击默认置灰效果

    1.设置UIButton的文字居右显示 [button setContentHorizontalAlignment:UIControlContentHorizontalAlignmentRight]; ...

随机推荐

  1. 单据列表里无法找到ERP系统开发需求单,但是业务对象里可以找到

    当从测试库迁移正式库时,如果新增了子系统,那么两边的子系统ID是不一样的 在BOS里修改单据的子系统只能修改业务对象列表里的子系统ID,单据列表里没有跟着一起修改 所以单据列表里的子系统ID需要手工去 ...

  2. [Shell]如何获取Maven工程的project.version信息

    问题: 今天遇到Shell中如何能获取Maven项目工程中的project.version信息的问题 解决方案: 使用Maven的Exec 插件 #! /bin/bash MVN_VERSION=$( ...

  3. [BZOJ 5074][Lydsy1710月赛]小B的数字

    传送门 \(\color{green}{solution}\) 设 \[b_{i}=2^{w_{i}},sum= \sum_{i=1}^{n}{w_{i}}\] 则对于任意\(a_{i}\)都有 \[ ...

  4. LTE

    LTE (telecommunication), Long Term Evolution, a telephone and mobile broadband communication standar ...

  5. odoo 的一些orm 操作

    1.基础文件及目录结构 在认识odoo ORM框架前,先介绍一下odoo中模块目录结构.     data:存放模块预制数据 i18n:存放国际化文件 models:存放模型等py代码 securit ...

  6. redis 网络库文件 重构

    https://blog.csdn.net/yangbodong22011/article/details/65444273 相关博客 https://blog.csdn.net/tanswer_/a ...

  7. RabbitMQ---初识

    1.概述 1.1 RabbitMQ   是  实现了   高级消息队列协议(AMQP) 的开源   消息代理软件,也称为  面向消息的中间件: AMQP:Advanced Message Queuin ...

  8. Android自动化之AccessibilityService

    简介demo示例说明Manifest声明AccessibilityService的XML配置文件创建继承自AccessibilityService的服务类MainActivity检测服务是否开启UiA ...

  9. Android 再谈handler

    今天在做http网络事件的响应网络接收处理一般不能放在主线程中使用,目前也只会使用AsyncTask进行处理!之前虽然写过handler处理的一些文章但是发现全不会了!无奈~ 关于handler某位兄 ...

  10. Android多渠道打包工具

    http://www.cnblogs.com/huangtianhui/archive/2012/07/14/2591382.html 鉴于Android市场众多,基于各种利益考虑,以及未来app能够 ...