制作一個簡單的JavaScript圖片庫

Question

我正在嘗試制作一個非常簡單的圖片庫。 大多數設計已經完成（使用了JQuery）...但是現在，我正在嘗試思考更改圖像所需的邏輯。 對於這一部分，我認為我只是使用javaScript而不是Jquery來保持簡單。 我不太熟悉javaScript語法，但這是我的入門嘗試。 這是創建圖片庫的可行方法嗎？ 我知道使圖像成為背景不是一個好主意，但是出於測試目的，我不希望裁剪圖像-因此將圖像設置為背景會修剪圖像以使其適合。

我還試圖考慮如何最初將ImageCnt設置為零...頁面加載時可以使用onload函數將ImageCnt設置為0嗎？ 可以將var傳遞給next（）嗎？ 如果是這樣，我可以將當前的ImageCnt從onClick傳遞給該函數。

PS。 我省略了很多代碼以使其易於閱讀，但是如果有必要，我可以提供更多代碼。

謝謝！ 這是我的代碼：

Java腳本

<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圖片庫

問題描述

Java腳本

html

2 個解決方案

解決方案1
3 已采納 2013-01-13 02:04:35

解決方案2
2 2014-02-24 00:32:52

制作一個簡單的JavaScript圖片庫

問題描述

Java腳本

html

2 個解決方案

解決方案1 3 已采納 2013-01-13 02:04:35

解決方案2 2 2014-02-24 00:32:52

解決方案1
3 已采納 2013-01-13 02:04:35

解決方案2
2 2014-02-24 00:32:52