色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何離開照片幻燈片并找到最后顯示的圖片？

CSS
榮姿康2年前7瀏覽0評論

我創(chuàng)建了一個幻燈片來隨機顯示網(wǎng)絡(luò)上的照片——并為此使用了一個有點特殊的設(shè)置。按下ESCAPE鍵會中斷顯示，問題來了:我希望隨后加載的新HTML頁面及其照片與幻燈片中顯示的最后一張照片相對應(yīng)，也就是被ESCAPE鍵中斷的那張照片，而是等于新加載的頁面及其照片與幻燈片中最早開始的照片相對應(yīng)。

所有照片都存儲在linux apache網(wǎng)絡(luò)服務(wù)器上。一個HTML文件。/slsh.html用作幻燈片頁面，而隨機照片系列是通過周期性地隨機創(chuàng)建指向子目錄中許多照片之一的符號鏈接而生成的。然而，符號鏈接的名稱從來沒有真正改變，在這個意義上是靜態(tài)的。/slsh.jpg

cronjob每10分鐘啟動一個bash腳本，大約每1.5秒進行一次符號鏈接，持續(xù)10分鐘。重要的是，通過javascript刷新功能，照片每9秒就會作為背景圖片載入瀏覽器窗口。我曾經(jīng)在這里更詳細地描述過這個設(shè)置:

如何在& ltdiv & gt使用CSS和Javascript

以下是我當前的HTML、CSS和JS摘錄:

<script>

  // KEYS
  window.addEventListener("keydown", keysPressed, false);
  window.addEventListener("keyup", keysReleased, false);
  var keys = [];
  function keysPressed( event) {
      keys[ event.keyCode] = true;
  
      if (event.keyCode == 27 || event.keyCode == 36) { //go to UID html : ESCAPE,HOME keys
          window.location.href = "./html/20070828-001264-012.html";
          event.preventDefault();
      }
      else if (event.keyCode == 81) { //go to main.html : q key
          window.location.href = "./main.html";
          event.preventDefault();
      }
      else if (event.keyCode == 13) { //refresh URL : ENTER
          location.reload();
          event.preventDefault();
      }
      else if (event.keyCode == 32 || event.keyCode == 39) { //load next=newest slsh.jpg : SPACEBAR,RIGHTARROW
          NextDivPic();
          event.preventDefault();
      }
  };
  
  function keysReleased(event) { // mark keys that were released
      keys[event.keyCode] = false;
  };


  // TIMER fx
  var timerId;
  var timerIdArray = [];
  timerId = setInterval('refresh()', 8888);
  timerIdArray.push( timerId);


  // REFRESH fx
  function refresh() {
      var timestamp = new Date().getTime();
      document.getElementById("a").style.backgroundImage = "url(./slsh.jpg?t=" + timestamp + ")";
  }

  // NEXT DIV PIC fx
  function NextDivPic() {
      // see -->  https://www.scaler.com/topics/javascript-clearinterval/
      for(var i=0;i<timerIdArray.length;i++){
          clearInterval(timerIdArray[i]);
      };
      timerId = setInterval('refresh()', 9000);
      timerIdArray.push( timerId);
      var timestamp = new Date().getTime();
      document.getElementById("a").style.backgroundImage = "url(./slsh.jpg?t=" + timestamp + ")";
      event.preventDefault();
  }

  // document.addEventListener('DOMContentLoaded', function NextDivPic() );

</script>

<style type="text/css">

  body, html {
      height: 100%;
      margin: 0;
  }

  .bg {

      /* The image used */
      background-image: url('./slsh.jpg');
      
      /* Full height */
      height: 100%; 
      
      /* Center and scale the image nicely */
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      background-color: rgb(10,10,10);

  }

</style>

<html>
<head>
  <title>20070828-001264-012</title>
</head>
<body id="body" onload="NextDivPic()">
  <div class="bg" id="a" onclick="NextDivPic()"></div>
</body>
</html>