今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生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. jquery 实现省市二级联动

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. jquery 实现动画效果（各种方法）

    1.show()和hide()和toggle()(这是show和hide的一个综合,一个按钮就实现显示和隐藏) 效果: 代码: <button type="button" c ...

  3. Intellij idea maven 引用无法搜索远程仓库的解决方案

    打开项目的POM文件,ALT+Insert键 出来添加引用的窗口 说明无法搜索到远程仓库,需要怎么设置呢? 在intellij idea 中配置好maven后 是这样的 如果加载失败,则需要自定义远程 ...

  4. JeeSite功能模块解读，功能介绍，功能实现

    做为十分优秀的开源框架,JeeSite拥有着很多实用性的东西. 首先说下他的一个流程 Jeesite流程 流程 主要是jsp,entity,dao,dao.xml,service,controller ...

  5. Rstudio常用且不熟快捷键 “原版+中文” 整理

  6. MySQL授权命令grant的详细使用方法

    2019-01-07 转自 https://www.cnblogs.com/crxis/p/7044582.html 本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的 ...

  7. JMeter元件的作用域与执行顺序

    元件的作用域 先来讨论一下元件有作用域.<JMeter基础元件介绍>一节中,我们介绍了8类可被执行的元件(测试计划与线程组不属于元件),这些元件中,取样器 是典型的不与其它元件发生交互作用 ...

  8. 使用jquery处理数据时要注意的问题

    现在的网站越来越重视用户体验,网站必须即时反应,前端技术越来越重要了,以前我们都用javascript,后来出现了很多js的框架,调用起来也很方便,但是随着网页上加载的数据越来越多,使用jquery的 ...

  9. OpenGL6-纹理动画

    代码下载 #include "CELLWinApp.hpp"#include <gl/GLU.h>#include <assert.h>#include & ...

  10. Vi/Vim命令壁纸图

    下载地址 http://pan.baidu.com/s/1mtQdY