我正在試圖製作一個非常簡單的圖片庫。大多數設計已經完成（使用JQuery）......但現在我正在想出讓圖像改變所需的邏輯。對於這部分，我想我只是使用javaScript而不是Jquery來保持簡單。我對javaScript語法不太熟悉，但這是我嘗試開始的。這是創建圖庫的可行方式嗎？我知道使圖像背景不是一個好主意，但爲了測試的目的，我不想裁剪圖像 - 因此將圖像設置爲背景會使圖像適合。製作一個簡單的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>

來源

2013-01-13 ThisBetterWork

這應該很好，你有什麼問題嗎？但是，我會建議將圖像數組聲明爲全局的，以便在每次調用函數時都不必重新創建。 – SISYN

沒有重新發明輪子，有jQuery插件已經爲你完成了工作。 –

由於jQuery的執行時間，我個人比較喜歡javascript到jQuery。 – SISYN

最重要的是，你需要通過如下圖所示串聯（「+」操作符）的不同部分，建立背景屬性;否則它不會被你的數組中的值替換，如果你把它設爲一個靜態字符串。

還可以使用在全球範圍內聲明和初始化您的圖像陣列和計數器：

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

最後，返回false從的onclick否則，你將重新加載頁面：

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

來源

2013-01-13 02:04:35 darma

謝謝，我正在很難得到正確的語法。我不會猜到我需要這樣連接。它現在完美工作：D – ThisBetterWork

這是我找到了一個簡單的內嵌非jQuery圖像庫的最佳示例，從http://extremestudio.ro/獲取：

<!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-24 00:32:52 geotheory

製作一個簡單的javascript圖片庫

的Javascript

HTML

回答

相關問題