создание галереи с дисплеем нет

-1

У меня есть код, который выполняется при нажатии кнопки, что должно быть 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); 
}

источник

2015-04-04 Henrique Viudes Liria

Пожалуйста, покажите нам, как вы присоединяете событие к кнопке, чтобы вызвать скрытие и отображение изображений. –

Недостаточно кода для кого-либо, чтобы определить причину сбоя. – clearlight

Вместо else if image.style.display = "block" – clearlight

Здесь вы идете мате ... установить пути к изображениям, которые существуют на жестком диске (убедитесь, что вы используете слэши в пути) и когда вы нажимаете next/prev, он должен циклически перемещаться по вашим изображениям. Удачи.

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

источник

2015-04-04 02:31:48 user4723924

см. Мой код, его не работает. –

Redone с нуля и обновленный здесь ... – user4723924

создание галереи с дисплеем нет

ответ

Смежные вопросы