如何使用javascript创建迷你图片库？

debugcn 发表于 Dev

繁荣点击

我一直在尝试创建一个迷你图片库，其中有一个名为“defaultPic”的主图片的 img 标签，以及名为“subPic1”和“subPic2”的子图像的另外两个 img 标签。所以基本上默认图片是subPic1，我想要发生的是当用户点击subPic2时，defaultPic中的图像应该被subPic2替换，反之亦然。这是呈现的 html 的图像：

大框是默认图片，小框是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>

斯里尼瓦斯

它工作正常......再次检查，下面是您的代码片段

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-14

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何使用javascript创建迷你图片库？

如何使用javascript创建迷你图片库？

如何使用 jquery 创建图片库

如何使用Javascript按标签过滤图片库？

如何创建无限滚动图片库

如何使用JQuery创建“下一步”和“预览”按钮？（图片库）

如何创建带有边框的图片库

如何在 Django 的图片库中创建类别

如何居中图片库？

使用Hammerspoon的图片库

创建响应式图片库

如何使用Phonegap Filetransfer将图片下载到iOS中的图片库

如何使用图片库自定义Codeigniter水印文本和图片？

如何使用 react 或 css 在图片库中一次突出显示 1 张图片

如何仅需几次鼠标操作就可以创建图片库？

PHP图片库

HTML图片库

进入图片库

我想使用数组或会话/ Cookie在php中创建一个图片库

创建具有相同大小图像的小图片库

使用迷你更新

如何在WordPress图片库中使用jQuery选择下拉菜单项？

如何使用angularjs离子科尔多瓦相机打开图片库？

如何使用C＃以编程方式从SharePoint网站获取所有图片库的列表

如何以角度 4 创建迷你折线图

如何使用Python图片库中“图片”函数中的像素数据写入二进制文件？

在Python中使用Matplotlib创建迷你图

我如何获得Codeigniter验证码图片库

如何更改 MediaWiki 类别中的图片库格式选项

如何改进这个简单的图片库代码？

使用document.getElementbyId（）无法正确显示图片库