我有此代码：
<!DOCTYPE html>
<html>
<body>
<head>
<script>
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"){
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;
</script>
<style type="text/css">
button:active {
padding: 0px;
}
button#id4 {
margin: auto auto auto auto;
font-weight: bold;
height: 80px;
width: 150px;
background-color: #000;
color: #FFF;
border-radius: 20px 20px 20px 20px;
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; }
}
</style>
</head>
<center>
<img id="id1" style="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" /><span>Slideshow!</span></button>
</center>
</body>
</html>我以互联网为例拍摄了一些图像。顺便说一句，当我第一次单击按钮时（因此在页面加载后），它向上移动...您知道任何解决方案吗？
我知道在W3chools中有一些幻灯片显示的代码可以很好地工作，但是我会自己尝试，并从中学习更多有关JavaScript的乐趣
代替显示器使用CSS可见性（可见/隐藏）