浏览网页隐藏图片 html,Html、Js实现网页图片切换及隐藏

HTML网页图片的切换及隐藏：

完成实现效果

代码如下：

图片切换隐藏

下一张

隐藏

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("图片被隐藏，无法加载！")

}

});

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

浏览网页隐藏图片 html,Html、Js实现网页图片切换及隐藏相关推荐

html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
html上传动态图片不显示图片,解决 viewer.js 动态更新图片导致无法预览的问题
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
js html 图片贴纸,Sticker.js 在网页实现便签贴纸效果 - 文章教程
Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...
blob 图片_前端JS实现字符串/图片/excel文件下载
编者按:本文转载自SF专栏,由作者赵帅强授权奇舞周刊转载在web开发中,如果你想让用户下载或者导出一个文件,应该怎么做呢? 传统的做法是在后端存储或者即时生成一个文件来提供下载功能,这样的优势是 ...
android去掉png图片灰色背景,JS解决PNG图片灰色背景问题
PNG图片用来制作漂亮的网页背景很实用,此方法也是比较简单的,会让网页增色不少.不过,万恶的IE似乎暗中做对,当你使用PNG图片的时候,IE会自动为PNG图片增加一个灰色背景,这真的好让人烦,那么有没 ...
css js 代码怎么隐藏,如何仅使用js代码（和css）隐藏元素？
在现有的代码中,我有一个html页面,其中包含一些java类中存在的变量.我想要做的是隐藏一些变量,如果没有定义(根本没有值),并以正常方式显示其他变量.如何仅使用js代码(和css)隐藏元素? 下面 ...
火影忍者网页设计html,html+css+js实现火影背景切换登录页面
1.效果图(代码往下滑) 2.html代码 3.css代码 *{ margin:0px; padding:0px; } /* *号是全部的都外边距和内边距都为0,而body只是主题的外边距和内边距都为 ...
php 实现背景图片轮换,纯js实现背景图片切换效果代码
html代码背景切换因为javascript逻辑顺序比较强,所以要考虑引用js的位置 css代码 body {font-size:12px;} div{ width:950px; height:8 ...
大学生HTML作业节日网页 HTML作业节日文化网页期末作业 html+css+js节日网页 HTML学生节日介绍 HTML学生作业网页视频

浏览网页隐藏图片 html,Html、Js实现网页图片切换及隐藏

浏览网页隐藏图片 html,Html、Js实现网页图片切换及隐藏相关推荐

最新文章

热门文章