今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生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. document.documentElement和document.body区别介绍

    document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...

  2. jquery 实现省市二级联动

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

  3. 逆向学习-DLL注入

    DLL注入技术,可以实现钩取API,改进程序,修复Bug. DLL注入指的是向运行中的其他进程强制插入特定的DLL文件. DLL注入命令进程自行调用LoadLibrary()API,加载用户指定的DL ...

  4. 搭建gogs

    https://blog.csdn.net/hwm_life/article/details/82969005 服务器环境 CentOS 7 64位 安装Gogs所需的其它环境 需要安装的依赖有Ngi ...

  5. C#集合之集(set)

    包含不重复元素的集合称为“集(set)”..NET Framework包含两个集HashSet<T>和SortedSet<T>,它们都实现ISet<T>接口.Has ...

  6. Codeforces - 规律题 [占坑]

    发现自己容易被卡水题,需要强行苟一下规律题 CF上并没有对应的tag,所以本题集大部分对应百毒搜索按顺序刷 本题集侧重于找规律的过程(不然做这些垃圾题有什么用) Codeforces - 1008C ...

  7. 3dsmax2017卸载/安装失败/如何彻底卸载清除干净3dsmax2017注册表和文件的方法

    3dsmax2017提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dsmax2017失败提示3dsmax2017安装未完成,某些产品无法安装,也有时候想重新 ...

  8. C# 获取SHA256码

    1. 如果是要获得某个字符串的SHA256,代码如下: public static string SHA256(string str) { //如果str有中文,不同Encoding的sha是不同的! ...

  9. Mongodb定时备份脚本和清除脚本

    Mongodb用的是可以热备份的mongodump和对应恢复的mongorestore,在linux下面使用shell脚本写的定时备份,代码如下 1.定时备份 #!/bin/bash sourcepa ...

  10. CCF 201409-4 最优配餐

    问题描述 试题编号: 201409-4 试题名称: 最优配餐 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么 ...