1

我正在尝试制作一个非常简单的图片库。大部分设计已经完成（使用 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>
4

2 回答 2

3

这是我从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 嵌入在标签中，但可以很容易地移动到脚本标签中以获得更大的灵活性。

于 2014-02-24T00:32:52.380 回答
3

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

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

<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>
于 2013-01-13T02:04:35.380 回答