Question

我有一些代码在按下按钮时执行，应该是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);
}

Answer 1

在这里你要交配...设置硬盘上存在的图像的路径（确保在路径中使用正斜杠），当你点击下一个/上一个时，它应循环显示你的图像。祝你好运。

<!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>

制作一个没有显示的画廊

1 个答案: