【问题标题】：Making a simple javascript Image gallery制作一个简单的 javascript 图片库
【发布时间】：2013-01-13 01:57:10
【问题描述】：

我正在尝试制作一个非常简单的图片库。大部分设计已经完成（使用 JQuery）......但现在我正在尝试思考改变图像所需的逻辑。对于这一部分，我想我会使用 javaScript 而不是 Jquery 来保持简单。我对 javaScript 语法不太熟悉，但这是我开始的尝试。这是创建图库的可行方法吗？我知道将图像设置为背景不是一个好主意，但出于测试目的，我不想裁剪图像 - 因此将图像设置为背景会修剪图像以适应。

我还试图考虑如何最初将 ImageCnt 设置为零...可以在页面加载时使用 onload 函数将 ImageCnt 设置为 0 吗？可以将 var 传递给 next() 吗？如果是这样，我可以将当前 ImageCnt 从 onClick 传递给函数。

PS。为了便于阅读，我省略了很多代码，但如果有必要，我可以提供更多代码。

谢谢！这是我的代码：

Javascript

<script>
  function next()
  {
    var myImage= new Array(); 
    myImage[0]="penguins.jpg";       
    myImage[1]="desert.jpg";
    myImage[2]="jellyfish.jpg";
    myImage[3]="flower.jpg"; 

    ImageCnt++;

    document.getElementById("whiteBox").style.background = 'url(myImage[ImageCnt])';
  }
</script>

html

<a href="#" onclick="next()"><img src="next.png"/></a>

【问题讨论】：

这应该可以正常工作，你有什么问题吗？但是，我建议将图像数组声明为全局数组，这样就不必在每次调用函数时都重新创建它。
与其重新发明轮子，还有 jQuery 插件已经为您完成了工作。
由于 jQuery 的执行时间，我个人更喜欢 JavaScript 而不是 jQuery。
我不认为 document.getElementById("whiteBox").style.background = 'url(myImage[ImageCnt])' 工作....当我只是把图像工作url 作为参数，但它不适用于数组。
服务器上图片的路径是什么？例如，它们是在“图像”文件夹中，还是仅在页面本身的根目录中？

标签： javascript image-gallery

【解决方案1】：

最重要的是，您需要通过连接（“+”运算符）它的不同部分来构建背景属性，如下所示；否则，如果将其设为静态字符串，它将不会被数组中的值替换。

还可以使用全局范围来声明和初始化您的图像数组和计数器：

<script>
var myImage= new Array(); 
myImage[0]="penguins.jpg";       
myImage[1]="desert.jpg";
myImage[2]="jellyfish.jpg";
myImage[3]="flower.jpg"; 

var ImageCnt = 0;

function next(){
    ImageCnt++;
    document.getElementById("whiteBox").style.background = 'url(' + myImage[ImageCnt] + ')';
  }
</script>

最后，从 onclick 返回 false 否则你会重新加载页面：

<a href="#" onclick="next();return false;"><img src="next.png"/></a>

【讨论】：

谢谢，我很难让语法正确。我不会猜到我需要像那样连接。它现在完美运行：D

【解决方案2】：

这是我从http://extremestudio.ro/获得的简单内联非jQuery图片库的最佳示例：

<!DOCTYPE html PUBLIC>
<html>
  <head>
    <title>
      Simple and Effective Photo Gallery with HTML and JavaScript
    </title>

    <style type="text/css">
      body {
        background: #222;
        margin-top: 20px;
      }

      h3 {
        color: #eee;
        font-family: Verdana;
      }

      .thumbnails img {
        height: 80px;
        border: 4px solid #555;
        padding: 1px;
        margin: 0 10px 10px 0;
      }

      .thumbnails img:hover {
        border: 4px solid #00ccff;
        cursor:pointer;
      }

      .preview img {
        border: 4px solid #444;
        padding: 1px;
        width: 400px;
      }
    </style>
  </head>

  <body>
    <div class="gallery" align="center">
      <h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/>

      <div class="thumbnails">
        <img onmouseover="preview.src=img1.src" id="img1" src="http://bit.ly/2rz3hy" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img2.src" id="img2" src="http://bit.ly/1ug1e6" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img3.src" id="img3" src="http://bit.ly/1yIAYc" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img4.src" id="img4" src="http://bit.ly/2LHyDW" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img5.src" id="img5" src="http://bit.ly/2wyHSR" alt="Image Not Loaded"/>
        <img onmouseover="preview.src=img6.src" id="img6" src="http://bit.ly/yRo1i" alt="Image Not Loaded"/>
      </div><br/>

      <div class="preview" align="center">
        <img id="preview" src="http://bit.ly/2rz3hy" alt="No Image Loaded"/>
      </div><br/>
    </div>
  </body>
</html>

唯一的 javascript 嵌入在标签中，但可以很容易地移动到脚本标签中以获得更大的灵活性。

【讨论】：