0
我已经包含了我一直在努力的代码很长一段时间。我确信我犯了很多错误，可能没有用最干净的方式写出来。不过，我在很长一段时间后再次拿起编码。代码在某种程度上起作用。Image Rotator - 诊断问题Javascript/Html
我想要它做的是显示jpeg图像保持成比例，但将适合任何显示设备的屏幕。图像需要一次显示一个图像，并大约每15秒循环一次新图像。
我将使用kiosk插件在远程设备上以全屏模式自动打开网页。不过，我也希望能够通过智能手机和平板电脑查看它。 为了测试我让它骑自行车的时间更短。
现在代码工作的方式（据我所知）是，它不断地加载图像到网页，而不是删除以前的图像。它可能会删除一些图像，但我需要一次只加载一个图像。我用screen.availHeight & screen.availWidth设置图像的大小。目前，我只在Google Chrome浏览器中进行测试，并且正在使用align="center"代码将图像居中。
真的，我正在寻求帮助的是让图像一次显示一个，而不会堆叠在彼此之上。我想使用我迄今为止写的代码，因为我通常知道它是如何工作的，但是如果它们是一种更简单的方式，我就会全神贯注。我很抱歉代码的不稳定性，但在测试时我有一些注释。
以下代码是我拥有的所有内容，您只需加载自己的图像即可显示它们。我相信我的问题的根源是使用appendChild，但replaceChild不起作用，但这可能是由于我没有完全理解发生了什么。
如果您需要更多信息，我会尽可能快地回复。如果我没有以正确的方式提交，我很抱歉。感谢您提供的任何帮助，我真的是一位在边干边学习的新手编码员。
<html>
<body style=" overflow:hidden; background-color:#800000; border:none; vertical-align:middle" align="center">
<script>
var myIndex = 0;
(function myFunction() {
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var i = 0;
while (i<7) {
document.body.removeChild(document.body.childNodes[0]);
if (screenWidth > screenHeight) {
if (i == 0) {
var i = i + 1;
var y = document.createElement("IMG");
y.setAttribute("src", "Slide7.JPG");
y.setAttribute("width", "auto");
y.setAttribute("height", screen.availHeight);
document.body.appendChild(y);
} else if (i == 1) {
var i = i + 1;
var y = document.createElement("IMG");
y.setAttribute("src", "Slide6.JPG");
y.setAttribute("width", "auto");
y.setAttribute("height", screen.availHeight);
document.body.appendChild(y);
} else if (i == 2) {
var i = i + 1;
var y = document.createElement("IMG");
y.setAttribute("src", "Slide5.JPG");
y.setAttribute("width", "auto");
y.setAttribute("height", screen.availHeight);
document.body.appendChild(y);
} else if (i == 3) {
var i = i + 1;
var y = document.createElement("IMG");
y.setAttribute("src", "Slide4.JPG");
y.setAttribute("width", "auto");
y.setAttribute("height", screen.availHeight);
document.body.appendChild(y);
} else if (i == 4) {
var i = i + 1;
var y = document.createElement("IMG");
y.setAttribute("src", "Slide3.JPG");
y.setAttribute("width", "auto");
y.setAttribute("height", screen.availHeight);
document.body.appendChild(y);
} else if (i == 5) {
var i = i + 1;
var y = document.createElement("IMG");
y.setAttribute("src", "Slide2.JPG");
y.setAttribute("width", "auto");
y.setAttribute("height", screen.availHeight);
document.body.appendChild(y);
} else if (i == 6) {
var i = i + 1;
var y = document.createElement("IMG");
y.setAttribute("src", "Slide1.JPG");
y.setAttribute("width", "auto");
y.setAttribute("height", screen.availHeight);
document.body.appendChild(y);
} else {
// var i = 0;
//var y = document.removeElement("IMG");
//y.setAttribute("src", "Slide1.JPG");
// y.setAttribute("width", "auto");
// y.setAttribute("height", screen.availHeight);
// document.body.removeChild(document.body.childNodes[1]);
// document.body.appendChild(y);
}
} else {
var y = document.createElement("IMG");
y.setAttribute("src", "IMG_3043.JPG");
y.setAttribute("height", "auto");
y.setAttribute("width", screen.availWidth);
document.body.replaceChild(y);
}
}
myIndex++;
if (myIndex > i) { myIndex = 1 }
var y = document.createElement("IMG");
//y.setAttribute("src", "Slide1.JPG");
y.setAttribute("width", "auto");
y.setAttribute("height", screen.availHeight);
document.body.appendChild(y);
setTimeout(myFunction, 2000);
//var y = document.removeElement("IMG");
})();
</script>
</body>
</html>
为什么C＃中添加的标签？这里没有C＃。 – Marcs
不过现在你不能再“C＃”了。 – Roberrrt
我把C＃添加为标签，因为在Visual Studio中，我选择用于编码我的网站的页面语言。 – Roofus