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

}

});

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