JavaScript對象不變圖像

我正在處理一個簡單的圖像庫頁面，該頁面包含一個單擊縮略圖圖像時被交換的主圖像。我知道在JQuery中做這件事的方式會容易得多，但我決心在繼續使用JQuery之前抓住JS。JavaScript對象不變圖像

這裏是問題：現在，當單擊縮略圖圖像時，我希望主圖像保持在1000px寬，僅用overflow-x（已完成），所有變化都是主圖像。我認爲我接近JS代碼，並且只需要一些懂得我在這裏做錯了什麼的人來調用！我所要做的就是getElementById（URL）並交換它！

我不知道如何上傳圖像到JS小提琴，所以我的例子是圖像少，但所有代碼都在那裏，並在本地處理圖像。

http://jsfiddle.net/Margate/zJjys/

代碼如下：// 預先感謝您的任何幫助

<html> 
<head> 
<title>Confused!</title> 

<style type="text/css"> 
#main-image-container{width: 1000px; height: 350px; position: absolute; top: 172px; left: 0px; border: 1px solid black; overflow-x: auto; overflow-y: hidden;} 
#graffiti-panorama-image-bar{width: 600px; height: 95px; position: absolute; top: 540px; left: 200px; border: 1px solid black; overflow: auto; background-color: white;} 
.image{position: absolute; cursor: pointer;} 
#center-page{border:1px solid red; width: 1005px; height: 700px; position: absolute; margin: 0px auto;}

<body> 
<div id="center-page"> 

<div id="main-image-container"> 
<img id="image" src="image-01.jpg" /> 
</div> 

<div id="graffiti-panorama-image-bar"> 
<img src="small-01.jpg" onclick="Main1()" class="image" style=" left: 0px;" /> 
<img src="small-02.jpg" onclick="Main2()" class="image" style=" left: 307px;" /> 
<img src="small-03.jpg" onclick="Main3()" class="image" style=" left: 626px;" /> 
<img src="small-04.jpg" onclick="Main4()" class="image" style=" left: 941px;" /> 
<img src="small-05.jpg" onclick="Main5()" class="image" style=" left: 1260px;" /> 
</div> 
</div> 

<script type="text/javascript"> 
function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";} 
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";} 
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";} 
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";} 
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";} 
</script> 

</body> 
</html>

來源

2013-06-11 Margate

嘗試改變：

function Main1(){var obj=document.getElementById("image").style; obj.src="image-01.jpg";} 
function Main2(){var obj=document.getElementById("image").style; obj.src="image-02.jpg";} 
function Main3(){var obj=document.getElementById("image").style; obj.src="image-03.jpg";} 
function Main4(){var obj=document.getElementById("image").style; obj.src="image-04.jpg";} 
function Main5(){var obj=document.getElementById("image").style; obj.src="image-05.jpg";}

要：

function Main1(){var obj=document.getElementById("image"); obj.src="image-01.jpg";} 
function Main2(){var obj=document.getElementById("image"); obj.src="image-02.jpg";} 
function Main3(){var obj=document.getElementById("image"); obj.src="image-03.jpg";} 
function Main4(){var obj=document.getElementById("image"); obj.src="image-04.jpg";} 
function Main5(){var obj=document.getElementById("image"); obj.src="image-05.jpg";}

的.src屬性是圖像本身，而不是它的風格集合的性質。

您也可以鞏固這些功能集成到一個單一的功能，並通過圖像URL作爲參數：

function Main(imageUrl) 
{ 
    var obj=document.getElementById("image"); 
    obj.src=imageUrl; 
}

然後調用它：

<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" />

來源

2013-06-11 19:33:19

THANK YOU SO MUCH：）這工作完美正是我想要做的！我想我一定嘗試了其他所有可能的方式！這種語言正在推動着我！ – Margate

組合這些功能不是更容易嗎？它們之間的唯一區別是文件名中的數字 – Ian

是的！但我不知道該怎麼做！我知道（因爲CSS），這是組合事物的方式，但沒有那麼多是的！我仍然在努力解決所有問題，並努力讓事情發揮一點作用。 – Margate

跟進LAN的評論：

<div id="main-image-container"> 
<img id="image" src="image-01.jpg" /> 
</div> 

<div id="graffiti-panorama-image-bar"> 
<img src="small-01.jpg" onclick="Main('image-01.jpg')" class="image" style=" left: 0px;" /> 
<img src="small-02.jpg" onclick="Main('image-02.jpg')" class="image" style=" left: 307px;" /> 
<img src="small-03.jpg" onclick="Main('image-03.jpg')" class="image" style=" left: 626px;" /> 
<img src="small-04.jpg" onclick="Main('image-04.jpg')" class="image" style=" left: 941px;" /> 
<img src="small-05.jpg" onclick="Main('image-05.jpg')" class="image" style=" left: 1260px;" /> 
</div> 
</div> 

<script type="text/javascript"> 
function Main(image) { 
     document.getElementById("image").src=image; 
    } 
</script> 

</body> 
</html>

來源

2013-06-11 21:24:13 Jacob

現在我明白了！那很容易！我非常感謝Jacob，我瞭解到。我想這樣做，但不知道如何...... – Margate

JavaScript對象不變圖像

回答

相關問題