制作一个没有显示器的画廊

making a gallery with display none

本文关键字：显示器 一个      更新时间：2023-09-26

我有一些代码在按下按钮时执行，应该是hid/show图像。但它不起作用。

有什么建议吗？

如何使用var The_Image=1;？

HTML

<div id="gallery">
<div id="galleryimg">
   <img src="imagens/galeria1.jpg" id="img01" name="img01" value="1" style="visibility:visible;" />
   <img src="imagens/galeria2.jpg" id="img02" name="img02" value="2" style="visibility:hidden;"  />
   <img src="imagens/galeria3.jpg" id="img03" name="img03" value="3" style="visibility:hidden;"  />
   <img src="imagens/galeria4.jpg" id="img04" name="img04" value="4" style="visibility:hidden;"  />
   <img src="imagens/galeria5.jpg" id="img05" name="img05" value="5" style="visibility:hidden;"  />
   <img src="imagens/galeria6.jpg" id="img06" name="img06" value="6" style="visibility:hidden;"  />
</div>
<div id="botoes">
 <button id="imgnextright" name="imgnextright" onclick="ShowNext(The_Image)" > <i class="fa fa-arrow-circle-left fa-2x"></i>  </button>
 <button id="imgnextleft" name="imgnextleft" onclick="ShowPrev(The_Image)" ><i class="fa fa-arrow-circle-right fa-2x"></i> </button>
 </div>
</div>

Javascript：

    var The_Image=1;
function ShowImg(Which){
    var img1 = document.querySelector("#img01");
    var img2 = document.querySelector("#img02");
    var img3 = document.querySelector("#img03");
    var img4 = document.querySelector("#img04");
    var img5 = document.querySelector("#img05");
    var img6 = document.querySelector("#img06");
 img1.style.visibility='hidden';
 img2.style.visibility='hidden';
 img3.style.visibility='hidden';
 img4.style.visibility='hidden';
 img5.style.visibility='hidden';
 img6.style.visibility='hidden';
 document.getElementById(Which).style.visibility='visible';
}
function ShowNext(Num){
if(Num==6){Num=1;} else {Num ++;}
ShowImg('img'+Num);
}
function ShowPrev(Num){
if(Num==1){Num=6;} else {Num --;}
ShowImg('img'+Num);
}

给你，伙计。。。设置硬盘上存在的图像的路径（确保在路径中使用斜杠），当您单击next/previ时，它应该在图像中循环。祝你好运

<!DOCTYPE html>
<head>
<style type="text/css">
.BoxStyle {
 border: 2px solid #123456;
 background-image: url("C:/Autumn-Tree.jpg");
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-o-background-size: 100% 100%;
 background-size: 100% 100%;
}
</style>
</head>    
<body>
<script type="text/javascript">
var The_Image=1;
function ShowImg(Num){
if(Num==1){Src='C:/disco.bmp';} else
if(Num==2){Src='C:/Merlin.jpg';} else
if(Num==3){Src='C:/grass.jpg';} else
if(Num==4){Src='C:/pebbles.jpg';} else
if(Num==5){Src='C:/lake.jpg';} else
if(Num==6){Src='C:/swan.jpg';}
The_Image=Num;
TheBox.style.backgroundImage='url("'+Src+'")';
}
function ShowNext(Num){
if(Num==6){Num=1;} else {Num ++;}
ShowImg(Num); 
}
function ShowPrev(Num){
if(Num==1){Num=6;} else {Num --;}
ShowImg(Num);
}

</script>
<div id="TheBox" class="BoxStyle" style="position:absolute; left:0px; top:0px; width:400px; height:200px;"></div>
<div style="position:absolute; top:250px; left:0px;">
<input type="button" onclick="ShowPrev(The_Image);" value="< Prev"> 
<input type="button" onclick="ShowNext(The_Image);" value="Next >">
</div>
</body>
</html>
相关文章：