Question

我已经包含了我已经工作了很长时间的代码。我确信我犯了很多错误，可能并没有以最干净的方式写出来。但是，我在很长一段时间后才重新开始编码。代码在某种程度上起作用。

我想要它做的是显示保持比例的jpeg图像，但是适合任何显示设备的屏幕。图像需要一次显示一个并且大约每15秒循环到一个新图像。

我将使用自助服务终端插件在远程设备上以全屏模式自动打开网页。但是，我也希望能够从智能手机和平板电脑上查看它。为了测试我让它骑自行车的时间更短。

现在当前代码的工作方式（据我所知）是它不断将图像加载到网页中而不是删除之前的图像。它可能正在删除一些图像，但我需要它一次只加载一个。我使用了screen.availHeight＆amp; screen.availWidth设置图片的大小。目前我只在Google Chrome中进行测试，并且使用align="center"代码将我的图像居中。

我真正寻求帮助的是让图像一次显示一个，而不是叠加在一起。我想使用到目前为止我写的代码，因为我一般都知道它是如何工作的，但是如果它们是一种更简单的方式，我会全神贯注。我很抱歉代码的邋iness，但是我在测试时已注释掉了一行。

以下代码是我拥有的一切，您只需加载自己的图像即可显示它们。我相信我的问题的根源是使用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>

Answer 1

当您尝试显示图像的幻灯片放映时，如果要在所有设备中保持图像大小成比例，最好使用的是CSS的{{3}}。

快速参考：
background-image：根据您的网址设置背景图片 background-image: url('YOUR_URL')：将图像保持在容器的中心
background-position: center：保持图像始终包含在容器内 background-size: contain：如果单个图像无法覆盖完整的视角，则图像不会在容器中重复。

您可以使用background-repeat: norepeat从JavaScript访问HTML元素的CSS样式，其中element将是您的HTML元素。

并且道歉，删除了这么多代码。洛尔。

以下是摘录：

var imgList = [
    "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-0-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-1-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-2-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-3-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-4-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-5-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-6-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-7-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-8-icon.png"
  , "http://icons.iconarchive.com/icons/icons8/windows-8/512/Numbers-9-icon.png"
  ],
  imgCount = imgList.length,
  currentIndex = -1,
  interval = 0.5 * 1000,   // TIME-INTERVAL 500ms
  containerSelector = "#slideContainer",
  container;

function loop() {
  currentIndex = (currentIndex + 1) % imgCount;

  container.style.backgroundImage = "url('" + imgList[currentIndex] + "')";
  console.log(currentIndex);
}

(function() {
  container = document.querySelector(containerSelector);

  setInterval(loop, interval);
  loop();
})();

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#slideContainer {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  
  <div id="slideContainer"></div>
  
</body>

</html>

图像旋转器 - 诊断问题Javascript / Html

1 个答案: