Вот что я наблюдал:
- Кнопка, которую вы использовали, неверна, я тоже ее изменил.
- Вы должны go через
JavaScript Метод, который вы написали в основном, это причина, почему кнопка мерцает в первый раз, почему? Это происходит потому, что когда происходит событие первого щелчка, оно всегда переходит к последнему состоянию else, и оно делает первое изображение скрытым, и к тому времени кнопка начинает двигаться вверх, тогда как другой show() возвращает изображение на место. Теперь, если вы думаете, почему это не произошло для второго и третьего клика, это потому, что первое изображение теперь имеет свойство display либо none, либо block.
В первый раз свойство display для первого изображения всегда null, вы можете проверить его, добавив alert(), который вы узнаете, поэтому, чтобы решить проблему, у меня есть сделано, так как вы хотите, чтобы первое изображение отображалось во время загрузки страницы, поэтому я использовал display:block; для первого изображения во встроенном запросе, поэтому, когда вы нажимаете кнопку в первый раз вместо возврата нулевого значения, теперь оно возвращает block как свойство и, следовательно, останавливает кнопку для перемещения вверх.
Я полагаю, вы получили то, что я пытаюсь передать здесь, если мы не сможем подключиться.
ниже приведено рабочий код (не стесняйтесь изменять вещи)
function Show(element) {
element.style.display = "block";
}
function Hide(element) {
element.style.display = "none";
}
function Slide() {
try {
img1 = img1id.style.display;
img2 = img2id.style.display;
img3 = img3id.style.display;
if (img1 === "none" && img2 == "none") {
Show(img1id);
Hide(img3id);
} else if (img2 == "block" && img1 == "none") {
Hide(img2id)
Show(img3id);
} else if (img3 == "block" && img1 == "none" && img2 == "none") {
alert("none");
Show(img1id);
Hide(img3id);
} else {
Hide(img1id);
Hide(img3id);
Show(img2id);
}
} catch (e) {
alert("Evento " + e);
}
}
var img1id;
var img2id;
var img3id;
var buttonid;
function gestoreLoad() {
try {
img1id = document.getElementById("id1");
img2id = document.getElementById("id2");
img3id = document.getElementById("id3");
buttonid = document.getElementById("id4");
buttonid.onclick = Slide;
} catch (e) {
alert("gestoreLoad " + e);
}
}
window.onload = gestoreLoad;
button:active {
padding: 0px;
}
button#id4 {
margin: auto auto auto auto;
font-weight: bold;
height: 80px;
width: 150px;
border-radius: 20px 20px 20px 20px;
background-color: #000;
color: #FFF;
font-size: 1.5em;
}
img {
-webkit-animation: fadein 2s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s;
/* Firefox < 16 */
-ms-animation: fadein 2s;
/* Internet Explorer */
-o-animation: fadein 2s;
/* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<center>
<img id="id1" style="display:block; width:800px; height:400px;" src="https://image.shutterstock.com/image-photo/beatiful-nature-lake-forest-pang-260nw-1039096585.jpg" />
<img id="id2" style="display:none; width:800px; height:400px;" src="https://thumbs.dreamstime.com/b/fragment-traditional-iranian-architecture-against-beatiful-purple-sky-yellow-pink-clouds-beautiful-sunset-iranian-122642415.jpg" />
<img id="id3" style="display:none; width:800px; height:400px;" src="https://live.staticflickr.com/5808/21804482933_2b1279ef62_b.jpg" />
</center>
<br />
<center>
<button id="id4" type="button">Slideshow!</button>
</center>