今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生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. Windows下安装Redis服务(zip)

    1.官方没有 Windows版本的 Redis,官网介绍: Redis项目不正式支持Windows.但是,微软开发并维护了针对Win64的Windows版本. 2.Windows版本下载地址:http ...

  2. 微信小程序通过background-image设置背景图片

    微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong ...

  3. Form Authentication

    1.创建登陆的控制器和视图,实现登陆基本功能 2.创建视图模型,并在Action里面引用. 3.创建一个接口两个类,那个IUserPricipal接口要实现IPrincipal接口,UserPrici ...

  4. Windows与linux添加用户命令

    Windows 查看当前存在用户: net user 查看当前用户组: net localgroup 添加用户(以添加用户test密码test1234为例): net user test test12 ...

  5. J15W-J45W铜质截止阀厂家，J15W-J45W铜质截止阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 J15W-J45W铜质截止阀 无极资讯网精心为您挑选了(J15W-J45W铜质截止阀)信息,其中包含了(J15W-J45W铜质截止阀)厂家,( ...

  6. Linux 构建ftp服务器

    1.安装vsftpd服务器 $sudo apt-get install vsftpd 2.cd 到etc文件,配置vsftpd.conf文件 $sudo vi /etc/vsftpd.conf 修改至 ...

  7. Linux 系统下安装 mysql5.7.25（glibc版）

    前言:经过一天半的折腾,终于把 mysql 5.7.25 版本安装上了 Amazon Linux AMI release 2017.09 系统上,把能参考的博客几乎都看了一遍,终于发现这些细节问题,然 ...

  8. Java_无参数无返回类型方法及练习

    无参数无返回类型方法语法格式: public static void 方法名称(){ 方法体; } class Method03{ /*练习3:输出1-100中的每个数,要求使用无参无返回类型的方法完 ...

  9. OpenStack Neutron配置虚拟机访问外网

    配置完成后的网络拓扑如下: 当前环境: X86服务器1台 Ubuntu 16.04 DevStack搭建OpenStack 网络拓扑: 外部网络:192.168.98.0/24 内部网络:10.0.0 ...

  10. MongoDB实战开发

    [目标]:本文将以实战的形式,向您展示如何用C#访问MongoDB,完成常见的数据库操作任务, 同时,也将介绍MongoDB的客户端(命令行工作模式)以及一些基础的命令. [说明]:MongoDB是什 ...