如何使用javascript創建迷你圖片庫？

我一直在試圖創建一個迷你圖片庫，其中有一個名爲「defaultPic」的主圖片的img標籤，另外兩個名爲「subPic1」和「subPic2」的子圖片的img標籤。所以基本上默認圖片是subPic1，我想要發生的是當用戶點擊subPic2時，defaultPic中的圖像應該被subPic2替換，反之亦然。這裏呈現的HTML的圖像：如何使用javascript創建迷你圖片庫？

更大的框是默認的圖片同時較小的一個的是subPic1和subPic2。我嘗試添加一個onclick事件的子圖像，當點擊時，它會檢索圖像源，並將傳遞到默認圖片。但是當我嘗試點擊可以說subPic2時，onclick事件不會觸發，也不會發生任何事情。請幫助我解決這個問題或提供更好的解決方案來實現相同的目標。

下面是HTML腳本：

function getImage1(){ 
 
    var img = document.getElementById("subPic1").src; 
 
    document.getElementById("defaultPic").src = img; 
 
} 
 

 
function getImage2(){ 
 
    var img = document.getElementById("subPic2").src; 
 
    document.getElementById("defaultPic").src = img; 
 
}

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#defaultPic { 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
#subPic1 { 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
#subPic2 { 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
<title>TEST</title> 
 
<link rel="stylesheet" type="text/css" href="style.css"/> 
 
<script src="Image1.js"></script> 
 
<script src="Image2.js"></script> 
 
</head> 
 

 
<body> 
 
    <img id="defaultPic" src="http://via.placeholder.com/200x200" /><br/> 
 
    <img id="subPic1" src="http://via.placeholder.com/50x50" onclick="getImage1()"/><br/> 
 
    <img id="subPic2" src="http://via.placeholder.com/50x50" onclick="getImage2()"/> 
 
</body> 
 

 
</html>

來源

2017-09-05 Boom Click

其工作細..再次檢查，下面是你的代碼的片段

function getImage1(){ 
 
var img = document.getElementById("subPic1").src; 
 
document.getElementById("defaultPic").src = img; 
 
} 
 

 
function getImage2(){ 
 
var img = document.getElementById("subPic2").src; 
 
document.getElementById("defaultPic").src = img; 
 
}

*{ 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#defaultPic { 
 
border: 1px solid black; 
 
margin: 5px; 
 
width: 200px; 
 
height: 200px; 
 
} 
 

 
#subPic1{ 
 
border: 1px solid black; 
 
margin: 5px; 
 
width: 50px; 
 
height: 50px; 
 
    } 
 

 
    #subPic2{ 
 
border: 1px solid black; 
 
margin: 5px; 
 
width: 50px; 
 
height: 50px; 
 
    }

<html> 
 
    <head> 
 
    <title>TEST</title> 
 
<link rel="stylesheet" type="text/css" href="style.css"/> 
 
<script src="Image1.js"></script> 
 
<script src="Image2.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <img id="defaultPic" src="https://i.pinimg.com/originals/05/cc/e6/05cce60e8faed98dd28f77a3cfe13ef3.jpg" /><br/> 
 
    <img id="subPic1" src="https://i.pinimg.com/originals/05/cc/e6/05cce60e8faed98dd28f77a3cfe13ef3.jpg" 
 
        onclick="getImage1()"/><br/> 
 
    <img id="subPic2" src="https://www.collabco.co.uk/media/1257/microsoft-logo1.jpg" 
 
        onclick="getImage2()"/> 
 
    </body> 
 

 
</html>

來源

2017-09-05 06:07:02 cna327

是的，我剛剛發現Google Chrome中未啓用JavaScript。 –

好!!也請檢查其他瀏覽器..始終在至少2個瀏覽器中驗證您的代碼。 – cna327

如何使用javascript創建迷你圖片庫？

回答

相關問題