如何使用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创建迷你图片库？

回答

相关问题