Html、Js实现网页图片切换及隐藏

最新推荐文章于 2023-04-12 22:36:22 发布
最新推荐文章于 2023-04-12 22:36:22 发布
阅读量691 收藏 2
点赞数
分类专栏： Web前端 文章标签： Html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44609873/article/details/96156440
版权
HTML网页图片的切换及隐藏：

完成实现效果
在这里插入图片描述

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换隐藏</title>
	</head>
	<body  style="text-align: center;">
		<img src="img/BJN3.png" id="img" height="520" width="850">
		<br>
		<button id="cbtn" style="height: 40px; width: 80px;">下一张</button>		<!-- //定义按钮及其大小 -->
		<button id="hbtn" style="height: 40px; width: 80px;">隐藏</button>
	</body>
		<script type="text/javascript">
		var cbtn = document.getElementById("cbtn");
		var hbtn = document.getElementById("hbtn");
		var img = document.getElementById("img");
		var index = 0;
		//为元素添加点击触发事件
		hbtn.addEventListener("click",function(){
			if(hbtn.innerText == "隐藏"){  //用innerText来获取按钮内容
				img.style.opacity = 0;  //点击隐藏,隐藏图片
				hbtn.innerText = "显示";
			}
			else{
				img.style.opacity = 1;
				hbtn.innerText = "隐藏";
			}
		});
		var imgs = new Array(4);
		imgs[0] = "img/BJN3.png";  //向图片数组添加图片
		imgs[1] = "img/BJN2.png";
		imgs[2] = "img/BJN1.jpg";
		imgs[3] = "img/BJN5.jpg";
		cbtn.addEventListener("click",function(){
				if(hbtn.innerText == "隐藏"){
					if(index<=2){
						index++;
					}
					//判断下表是否溢出,溢出则回到第一张
					else{
						index = 0;
					}
					img.src = imgs[index];
				}
				//设置隐藏状态下,图片不可浏览
				else{
					alert("图片被隐藏，无法加载！")
				}
				
			});
	</script>
</html>

                   希望能对你们有所帮助！ 一起加油！！！

爱娶媳妇的苗同学
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现隐藏显示图片 JS实现点击切换图片效果
12-12
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>换图片</title> </head> <body> <butt
浏览网页隐藏图片 html,Html、Js实现网页图片切换及隐藏
weixin_39810441的博客
06-03 1630
HTML网页图片的切换及隐藏：完成实现效果代码如下：图片切换隐藏下一张隐藏var cbtn = document.getElementById("cbtn");var hbtn = document.getElementById("hbtn");var img = document.getElementById("img");var index = 0;//为元素添加点击触发事件hbtn.addE...
html中js左右图片切换效果,JS实现图片切换效果
weixin_34377666的博客
06-03 447
本文实例为大家分享了JS实现图片切换效果的具体代码，供大家参考，具体内容如下ONOFF //获得图片对象var pic=document.getElementById('pic');var i=0;//图片名称编号 默认显示第一张var timer;var isTrue=false;//标识是否已经启动了一个定时器 false未启动//点击事件document.getElementById('b...
js图片之间切换html图片自动切换
06-02
js图片之间切换html图片自动切换 js2图片 切换 图片 html图片 自动切换
html图片渐隐渐显,jquery图片滚动（渐隐渐现模糊消失效果）
weixin_33603429的博客
06-09 500
距离上次写图片滚动代码已经过去4个月了。最近的一次修改时在2013年5月15日更新。内容为“原创jQuery图片上下左右滚动代码”。里面已经集成了上下、左右、隐藏与消失的代码。可以说大部分的图片滚动万变不离其宗了。下面将写出另外一种方式，就是本文提到的“渐隐渐现的效果”，这个也是图片滚动比较常见的方式之一。查看演示js代码如下var bn=$("#banner");var bn_pic=$(".b...
HTML5实现CSS滤镜图片切换
04-06
在本案例中，我们探讨的是如何使用HTML5与CSS结合来实现一种独特的图片切换效果——“CSS滤镜图片切换”，这是一种具有不同视觉效果的百叶窗切换特效。 首先，我们要理解HTML5中的`<img>`标签，这是用来在网页上...
html+css+js实现图片切换效果
08-07
标题中的“html+css+js实现图片切换效果”是指利用HTML、CSS和JavaScript这三种核心技术来创建一个动态的图片轮播或切换功能。在网页设计中，这种效果常见于产品展示、滑动相册或者幻灯片展示等场景，能够为用户带来...
js实现20多种图片切换特效
06-04
首先，"js实现20多种图片切换特效"这个标题暗示我们将讨论JavaScript在图像处理方面的强大功能。JavaScript是一种广泛用于网页开发的脚本语言，能够实时更新DOM（文档对象模型）以改变页面内容。在图片切换特效中，...
html5游戏图片渐隐,如何利用html5实现图片的淡入淡出效果
weixin_34679596的博客
06-02 643
如何利用html5实现图片的淡入淡出效果发布时间：2020-12-16 10:51:06来源：亿速云阅读：74作者：小新小编给大家分享一下如何利用html5实现图片的淡入淡出效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！目的：实现图片的淡入淡出效果具体代码如下：html>移动端*{padding:0;marg...
html图片轮播代码渐隐,js淡入淡出的图片轮播效果代码分享
weixin_36472741的博客
06-09 223
本文实例讲述了淡入淡出的js图片轮播效果代码。分享给大家供大家参考。具体如下：运行效果图：----------------------查看效果-----------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的js图片轮播效果代码如下js图片轮播效果代码table img:hover{cursor:pointer;}var roll_image = n...
html图片渐隐渐显,js实现图片切换效果渐隐渐显
weixin_39980893的博客
06-09 720
图片渐隐渐显的切换效果window.onload = function(){var testDiv = document.getElementById('test');testDiv.style.opacity = 1.0;testDiv.onmouseover = show;testDiv.onmouseout = hide;};var interval1, interval2;var show...
html 图片居正中,doubleVision：暗藏玄机！在一张图片里隐藏另一张图
weixin_32451529的博客
06-04 174
友情提醒：本文在电脑上浏览效果最佳(最好是Chrome或Firefox浏览器)首先你可以看看这张图片。如果你在电脑上，想必你看到图片中写的是“ze first image!”。现在把它保存下来，用windows自带的图片浏览器打开，你看到了什么？“I' other image!”两张图片，采用不同的方式打开，看到的内容也不尽相同！PS.同样效果的图片还有这张：(在浏览器上看到的是"I'LL WEA...
图片的显示隐藏（两张图片，默认的时候显示第一张，点击的时候显示另一张）...
weixin_30299539的博客
11-05 2167
在写项目的时候，经常遇到一些图片显示的问题， 当页面静止的时候显示第一张（第二张页面隐藏），点击或者划过的时候显示第二张（第一张图片隐藏） 【并且第二张图片显示的时候，下面的文字也是变化的】 页面代码如下： <div class="fk"> <ul class="img_1"> <li v-for="(item, ...
显示隐藏图片html,JavaScript实现显示和隐藏图片
weixin_42353187的博客
06-03 2729
JavaScript之显示和隐藏图片，供大家参考，具体内容如下点击按钮可以显示和隐藏图片(默认显示)，附上代码：显示和隐藏图片隐藏 // 1.获取事件源var obtn = document.getElementById("btn");var newImg = document.getElementsByTagName("img")[0];// var isShow = true; //方法...
html5如何将4张照片排列,如何将多张图片排列在一张图片呢？学会这两种技巧，轻松搞定...
weixin_39956612的博客
06-24 7162
摄影爱好者平时拍照完后，都很喜欢把自己的图片都排列在一张图片里，便于欣赏，在PS中排列方法有很多，本文详细介绍两种比较实用又好看的排列方法，一种是将两张图片并排在一起，另外一种是将4张图片放在一起。1工具/原料Adobe Photoshop 软件2.思维导图3.效果图(1)两张排列(2)四张排列4.小技巧4.1如何将两张图片排列在一起呢？(1)将两张图片加载到同一个文档中在菜单栏中执行“文件”&g...
html中元素的显示与隐藏
m0_65033248的博客
04-12 2200
还有一种元素隐藏的方式： overflow: hidden;overflow属性定义了如果盒子中的元素超过了盒子的宽高，也就是该元素溢出了,我们该如何处理元素。可以看到元素超出了盒子的宽高（此时overflow属性值为visible, 超出部分不做处理，默认值）可以看到原本没有在页面中显示的元素，在页面中显示出来了，这就是元素的显示与隐藏。在实际开发网页中，我们使用display: none;将元素显示出来，还有。① 在元素x,y方向上都溢出时（效果一致）元素的位置不会保留，会被标准流元素占用。
html中隐藏图片display,html中的display:none代表什么
weixin_39774219的博客
06-03 2084
html中的display:none代表什么发布时间：2020-06-24 19:41:58来源：亿速云阅读：175作者：元一html中的display:none代表什么？可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。display:none的意思：隐藏元素并脱离文档，流就是隐藏该区域，不占实际空间，但对后台来说真实存在，可以获取被隐藏的元素...
html显示隐藏图片,简单的图片显示与隐藏
weixin_39848970的博客
06-03 3860
今天有个小问题，在iPhone上显示所有图片。但是不可能一次显示全部，只能显示图片的名称列表。需要点击图片名，然后显示图片，再次点击的话，就隐藏图片。一个比较简单的javascript代码，在这里记录下，方便以后取用。演示如下：代码也很简单。html[ 点我显示与隐藏图片 ]javascriptfunction show(id){//alert(id);var img = document.get...
html中图片显示、隐藏
l_degege的专栏
11-26 4835
$("#photo_img").show(); $("#photo_img").hide(); 注：https://blog.csdn.net/a_sid/article/details/53485013 二、 jQuery显示隐藏div的几种方法 https://blog.csdn.net/skh2015java/article/details/52790121 ...
html实现单击图片切换
最新发布
11-29
以下是使用HTML和JavaScript实现单击图片切换的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Image Gallery</title> <style> /* 灯箱样式 */ .lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; } .lightbox img { max-width: 80%; max-height: 80%; } .lightbox .prev, .lightbox .next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3em; color: #fff; cursor: pointer; } .lightbox .prev { left: 20px; } .lightbox .next { right: 20px; } </style> </head> <body> <!-- 图片列表 --> <div class="gallery"> <img src="image1.jpg" alt="Image 1" onclick="openLightbox(this)"> <img src="image2.jpg" alt="Image 2" onclick="openLightbox(this)"> <img src="image3.jpg" alt="Image 3" onclick="openLightbox(this)"> <img src="image4.jpg" alt="Image 4" onclick="openLightbox(this)"> </div> <!-- 灯箱 --> <div class="lightbox"> <img src="" alt="Lightbox Image"> <div class="prev" onclick="prevImage()"><</div> <div class="next" onclick="nextImage()">></div> </div> <script> // 获取图片列表和灯箱元素 var gallery = document.querySelector('.gallery'); var lightbox = document.querySelector('.lightbox'); var lightboxImage = lightbox.querySelector('img'); var prevButton = lightbox.querySelector('.prev'); var nextButton = lightbox.querySelector('.next'); // 获取所有图片元素 var images = gallery.querySelectorAll('img'); // 当前显示的图片索引 var currentIndex = 0; // 打开灯箱 function openLightbox(image) { // 设置灯箱图片 lightboxImage.src = image.src; // 显示灯箱 lightbox.style.display = 'flex'; // 获取当前图片索引 currentIndex = Array.prototype.indexOf.call(images, image); } // 关闭灯箱 function closeLightbox() { // 隐藏灯箱 lightbox.style.display = 'none'; } // 切换到上一张图片 function prevImage() { currentIndex--; if (currentIndex < 0) { currentIndex = images.length - 1; } lightboxImage.src = images[currentIndex].src; } // 切换到下一张图片 function nextImage() { currentIndex++; if (currentIndex >= images.length) { currentIndex = 0; } lightboxImage.src = images[currentIndex].src; } // 点击灯箱以外的区域关闭灯箱 lightbox.addEventListener('click', function(event) { if (event.target === this) { closeLightbox(); } }); // 监听键盘事件 document.addEventListener('keydown', function(event) { if (event.key === 'Escape') { closeLightbox(); } else if (event.key === 'ArrowLeft') { prevImage(); } else if (event.key === 'ArrowRight') { nextImage(); } }); </script> </body> </html> ``` 该示例代码中，我们使用了HTML和CSS来创建灯箱的样式，使用JavaScript来实现图片的切换。当用户单击图片时，我们会打开灯箱并显示当前图片。在灯箱中，我们还添加了上下切换按钮和键盘事件监听器，以便用户可以通过多种方式切换图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值