的Javascript

Question

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

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

Answer 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嵌入在代码中，但可以轻松移动到脚本代码以获得更大的灵活性。

制作一个简单的javascript图库

的Javascript

的HTML

2 个答案: