Question

我有一个代码，可以从文件夹中拍摄图片，并按其名称info_01，info_02（...）的顺序逐一显示。

现在，我想在“ diashow”的结尾或开头显示一个iframe。没关系。

您对如何将iframe实现在diashow中有任何想法吗？因此它将显示网站10秒钟，然后跳回到该文件夹的第一张（或最后一张）图片。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' http-equiv="refresh" content="5" />
      <script src="javascript/qualimonitoring.js"></script> 
      <link href="CSS/CSS_KZ.css" rel="stylesheet">
      <link href="CSS/cssSlider_test.css" rel="stylesheet">
      <title>
         Qualitätsmonitoring
      </title>
   </head>
   <body>
      <div id="header">
         </a>
         <div id="title" align="center">Q-Info</div>
      </div>
      <div id="kzahl" style="left: -491px; top: 70px; width: 2411px">
         <div class= "title2">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="auto-style3" 
            <span id="auto-style4">TU-34 Finish</span>
            </a>
            </a>
         </div>
      </div>
      <div id="kzahl2">
         <div id="diashow">
            <img id="eins" src="Bilder\Info_01.png" width="800" height="551" alt="Diashow mit eigenen Bildern">
         </div>
      </div>
      <div id="Hinweis">Bei Problemen  bitte an wenden.
      </div>
      &nbsp;
      <div id="Hinweis2">Information: Verantwortlich ist der anwesende Vorarbeiter.         
      </div>
   </body>
</html>

JavaScript代码：

window.addEventListener ? window.addEventListener("load", so_init, false) : window.attachEvent("onload", so_init);
var d = document,
  imgs = new Array(),
  zInterval = null,
  current = 0,
  maxpics = 99,
  pause = false,
  configTimeout = 5000;

function so_init() {

  if (!d.getElementById || !d.createElement) return;

  imgs[0] = d.getElementById("diashow").getElementsByTagName("img")[0];
  imgs[0].style.display = "block";
  imgs[0].xOpacity = .99;
  setTimeout(so_xfade, configTimeout);
  newimg();
}
//set fading between the images, first picture 5 seconds, other pictures 20s
function so_xfade() {

  if (current > maxpics) {
    location.reload();
    configTimeout = 50000;

  }
  cOpacity = imgs[current].xOpacity;
  nIndex = imgs[current + 1] ? current + 1 : 0;
  nOpacity = imgs[nIndex].xOpacity;
  cOpacity -= .05;
  nOpacity += .05;
  imgs[nIndex].style.display = "block";
  imgs[current].xOpacity = cOpacity;
  imgs[nIndex].xOpacity = nOpacity;
  setOpacity(imgs[current]);
  setOpacity(imgs[nIndex]);

  if (cOpacity <= 0) {
    imgs[current].style.display = "none";
    current = nIndex;
    setTimeout(so_xfade, configTimeout);
    newimg();
  } else {
    setTimeout(so_xfade, 50);
  }

  function setOpacity(obj) {
    if (obj.xOpacity > .99) {
      obj.xOpacity = .99;
      return;
    }
    obj.style.opacity = obj.xOpacity;
    obj.style.MozOpacity = obj.xOpacity;
    obj.style.filter = "alpha(opacity=" + (obj.xOpacity * 100) + ")";
    obj.style.KHTMLOpacity = obj.xOpacity;
  }
}

function newimg() {

  if (current < maxpics) {
    var cu1 = current + 1,
      cu2 = current + 2;
    imgAdr = "Bilder/Info_";
    imgs[cu1] = new Image();
    imgs[cu1].src = imgAdr + ((cu2) < 10 ? "0" + (cu2) : (cu2)) + ".png";
    imgs[cu1].xOpacity = 0;

    checkImage(imgAdr + ((cu2) < 10 ? "0" + (cu2) : (cu2)) + ".png",
      function() {
        d.getElementById("diashow").appendChild(imgs[cu1]);
        console.log("good " + imgAdr + ((cu2) < 10 ? "0" + (cu2) : (cu2)) + ".png");
        configTimeout = 3000;
      },
      function() {
        maxpics = current;
        configTimeout = 50;
        console.log("Bad");
      });

  }


}

function checkImage(imageSrc, good, bad) {
  var img = new Image();
  img.onload = good;
  img.onerror = bad;
  img.src = imageSrc;
}

如何在JavaScript中实现iframe？

0 个答案: