簡單的照片查看器

Question

我對這一切都很陌生。
我正在嘗試使用 javascript 或任何易於更改的內容制作一個簡單的照片查看器。
我只想要下一個和上一個。 按鈕讓您在照片之間切換。 單擊下一步，將顯示下一張照片。 就這么簡單。 我有一個 flash 版本，但我想避免使用 flash。我一直在制作多個頁面，每張照片一個頁面和一個重復的按鈕。 我知道必須有更好的方法，但我似乎無法弄清楚。 請幫忙

Answer 1

我想你可以結合布萊恩和保羅的解決方案。

首先，使用JQuery會讓生活變得更輕松（在你克服短暫的學習曲線之后）。

jQuery Cycle將讓您制作在不同圖像之間旋轉的幻燈片。

一個JQuery Lightbox（並且那里有很多選項）將讓用戶點擊圖像並讓它填滿屏幕。

Answer 2

我恭敬地不同意 wag2639 關於 jquery 的意見。

這是我的意見。 我認為當我們的意思是（至少對我而言）簡單。 我們不是說加+100K的Javascript碼。

此外，任何 JQuery 做的事情你都可以在 javascript 中做得更好。那么，為什么要浪費時間在會阻止你學習真正的 Javascript 的事情上呢。因為無論如何你都會有一個學習曲線。

這是我的簡單照片查看器版本。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
    <style>
    .PhotoFrame {
      width: 100%;
      height: 100vh;
      object-fit: contain;
    }
    </style>

    <div id="PhotoHolder">

      <img id="PhotoSlide" class="PhotoFrame" src="84154413.png" onclick="OnClickPhoto(event)">
    </div>

    <script>
    var ThePhotoTable = [
    "84154413.png",
    "84154414.png",
    "84154415.png",
    "84154416.png",
    "84154417.png"
    // ...
    ];
    var CurrentPhoto = 0;

    function OnClickPhoto (ThisEvent){
      let X,Y,W,H, Q;
      
      X= ThisEvent.clientX;
      Y= ThisEvent.clientY;
      W= ThisEvent.target.offsetWidth;
      H= ThisEvent.target.offsetHeight;
      Q= W/2;

      if(X < Q){
        if(CurrentPhoto > 0){
          DisplayPhotoIndx(--CurrentPhoto);
        }
      } else 
      if(X > (W - Q)){
        if(CurrentPhoto < ThePhotoTable.length - 1){
          DisplayPhotoIndx(++CurrentPhoto);
        }
      }
    }  
    function DisplayPhotoIndx(ThisIndx){
      let ThisImg = document.getElementById("PhotoSlide");

      ThisImg.src = ThePhotoTable[ThisIndx];
    }
    function SelfInit(){
      DisplayPhotoIndx(0);
    } SelfInit();
      
    </script>
    </body>
    </html>

這對你來說夠簡單嗎？

簡單的照片查看器

問題描述

2 個解決方案

解決方案1
2 2010-05-19 02:48:23

解決方案2
1 2022-05-28 08:47:02

簡單的照片查看器

問題描述

2 個解決方案

解決方案1 2 2010-05-19 02:48:23

解決方案2 1 2022-05-28 08:47:02

解決方案1
2 2010-05-19 02:48:23

解決方案2
1 2022-05-28 08:47:02