简单的照片查看器

发布于 2024-09-02 18:24:59 字数 200 浏览 7 评论 0原文

我对这一切还很陌生。
我正在尝试使用 javascript 或任何易于更改的内容制作一个简单的照片查看器。
我只想要下一个和上一个。按钮让您在照片之间切换。单击下一步，显示下一张照片。就这么简单。我有 Flash 版本，但我想避免使用 Flash。我花了很长时间制作了多个页面，每张照片一个页面，还有一个重复的按钮。我知道一定有更好的方法，但我似乎无法弄清楚。请帮忙

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

草莓味的萝莉 2024-09-09 18:24:59

我认为你可以结合布莱恩和保罗的解决方案。

首先，使用 JQuery 会让生活变得更加轻松（在你克服了短暂的学习曲线之后）。

jQuery Cycle 可以让您制作在不同图像之间旋转的幻灯片。

一个 JQuery Lightbox（并且有很多选项在那里）将让用户单击图像并使其填满屏幕。

回复收藏 0 原文

末蓝 2024-09-09 18:24:59

我非常不同意 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>

这对您来说足够简单吗？

I respectfully disagree with wag2639 opinion about the jquery.

Here's my opinion.
I think that when we mean (at least for me.) simple.
We do not mean add +100K of Javascript code.

Beside, anything JQuery does you can do better in javascript. So why waste your time on something that will prevent you from learning the real Javascript. Since you are going to have a learning curve anyway.

Here is my version of a simple photo viewer.

    <!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>

Is this simple enough for you?

回复收藏 0 原文

~没有更多了~