如何使用javascript创建迷你图库？ [英] How to create a mini image gallery using javascript?
问题描述
我一直在尝试创建一个迷你图片库，其中包含名为defaultPic的主图片的img标签，以及另外两个名为subPic1和subPic2的子图片的img标签。所以基本上默认图片是subPic1，我想要发生的是当用户点击subPic2时，defaultPic中的图像应该被subPic2替换，反之亦然。较大的框是默认图片，而较小的框是subPic1和subPic2。我尝试在子图像上添加一个onclick事件，单击它时，它将检索图像源并将传递给默认图片。但当我尝试点击让我们说subPic2时，onclick事件没有触发，没有任何反应。请帮助我解决这个问题或提供更好的解决方案来达到同样的目标。
我尝试过：
这是html脚本：
< html >
< head >
< title > TEST < / title >
< link rel = stylesheet type = text / css href = style.css / >
< script < span class =code-attribute> src = Image1.js > < / script >
< script src = Image2.js > < / script >
< / head >
< body >
< img id = defaultPic src = microsoftLogo1.jpg / > < br / >
< img id = subPic1 src = microsoftLogo1.jpg
< span class =code-attribute> < span class =code-attribute> onclick = getImage1（） / > < br / >
< img id = subPic2 src = microsoftLogo2.jpg
< span class =code-attribute> onclick = getImage2（） / >
< / body >
< / html >
这是css：
* {
margin ： 0;
padding ： 0;
}
＃ defaultPic {
border ： 1px纯黑;
margin ： 5px;
width ： 200px;
height ： 200px;
}
＃ subPic1 {
border ： 1px纯黑;
保证金 ： 5px;
宽度 ： 50px;
高度 ： 50px;
}
＃ subPic2 {
border ： <跨度class =code-keyword> 1px纯黑;
margin ： 5px;
width ： 50px;
height ： 50px;
}
这是javascript代码：
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;
}
< / < pre lang < span class =code-keyword> = CSS > < pre lang =CSS>< pre lang =CSS> pre>
说实话我看不出你的代码有什么问题，但这里有一个关于JSFiddle的工作示例：编辑小提琴 - JSFiddle [ ^
I've been trying to create a mini image gallery which has an img tag for the main picture called "defaultPic" and another two img tags for the sub images called "subPic1" and "subPic2". So basically the default picture is subPic1, what I want to happen is when the user click subPic2, the image in defaultPic should be replaced by subPic2 vice versa. The bigger box is the default picture meanwhile the smaller one's are subPic1 and subPic2. I've tried adding an onclick event to the sub images that when clicked, it will retrieve the image source and will be passed on to the default picture. But when I tried clicking lets say subPic2, the onclick event is not firing and nothing happens. Kindly help me on solving this one or provide better solutions to achieve the same goal.
What I have tried:
Here is the html 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="microsoftLogo1.jpg" /><br/>
<img id="subPic1" src="microsoftLogo1.jpg"
onclick="getImage1()"/><br/>
<img id="subPic2" src="microsoftLogo2.jpg"
onclick="getImage2()"/>
</body>
</html>
Here is the css:
*{
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;
}
Here is the javascript code:
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;
}
</<pre lang="CSS"><pre lang="CSS"><pre lang="CSS">pre>
to be honest I can't see what's wrong with your code, but here a working sample on JSFiddle: Edit fiddle - JSFiddle[^]
这篇关于如何使用javascript创建迷你图库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
