js点击小图切换大图源码
要实现点击小图切换大图的功能，可以使用JavaScript来处理点击事件，并动态更改大图的src属性。以下是一个简单的示例代码：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Switcher</title>
</head>
<body>
<div>
<img src="small-image1.jpg" alt="Small Image 1" class="small-image" data-large-src="large-image1.jpg">
<img src="small-image2.jpg" alt="Small Image 2" class="small-image" data-large-src="large-image2.jpg">
<img src="small-image3.jpg" alt="Small Image 3" class="small-image" data-large-src="large-image3.jpg">
</div>
<div>
<img id="large-image" src="large-image1.jpg" alt="Large Image">
</div>
<script src="script.js"></script>
</body>
</html>JavaScript部分（script.js）
document.addEventListener('DOMContentLoaded', function() {
const smallImages = document.querySelectorAll('.small-image');
const largeImage = document.getElementById('large-image');
smallImages.forEach(smallImage => {
smallImage.addEventListener('click', function() {
const largeSrc = this.getAttribute('data-large-src');
largeImage.src = largeSrc;
});
});
});解释
- HTML部分:
- 创建多个小图，每个小图都有一个
data-large-src属性，用于存储对应的大图路径。 - 创建一个大图元素，初始显示第一张大图。
- 创建多个小图，每个小图都有一个
- JavaScript部分:
- 使用
DOMContentLoaded事件确保DOM完全加载后再执行脚本。 - 获取所有带有
small-image类的小图元素。 - 为每个小图添加点击事件监听器，当点击小图时，获取其
data-large-src属性的值，并将其设置为大图的src属性，从而实现切换效果。
- 使用
优势与应用场景
- 优势:
- 简单直观，易于实现和维护。
- 用户交互友好，提升用户体验。
- 可以灵活扩展，支持任意数量的小图和大图组合。
- 应用场景:
- 图片库或相册展示。
- 电商网站的产品缩略图预览。
- 新闻网站的图片新闻切换。
可能遇到的问题及解决方法
- 图片加载延迟:
- 使用图片预加载技术，提前加载所有可能显示的大图。
- 使用图片预加载技术，提前加载所有可能显示的大图。
- 点击事件未触发:
- 确保所有元素和事件监听器正确绑定，检查是否有CSS样式阻止了事件的触发（如
pointer-events: none;）。
- 确保所有元素和事件监听器正确绑定，检查是否有CSS样式阻止了事件的触发（如
- 大图路径错误:
- 检查
data-large-src属性的值是否正确，确保路径相对于当前页面有效。
- 检查
通过以上方法，可以有效实现点击小图切换大图的功能，并解决常见的问题。
相关·内容
我想为公寓大楼添加一个整体平面图的图像(我将该图像添加到我的应用程序中)。现在，我想添加以下内容之一：或我谦虚地感谢你帮我弄清楚这件事！
浏览 2提问于2017-05-24得票数 0
2回答
我有一个Android MapView，我需要在MapView已经处理的引脚之上有第二层覆盖的引脚。我已经覆盖了ImageViews的Draw()方法，以便在地图移动时更新它们的位置(以便大头针也随之移动)，如下所示： if(mCoordinates != null && mapView != null){
LayoutParams mParams = (Lay
浏览 0提问于2011-11-29得票数 0
回答已采纳
所以情况是，我有一张大图片(名字作为截图)，第二张图片是最小的(名字作为参考)。有类似的程序吗？无论如何，这里是大图片和小图片的样本，以便于理解我需要什么。小图：参考图
非常感谢。
浏览 0提问于2017-11-20得票数 1
2回答
我有两个图像(小的和大的)。大的包含一个小的。例如，如果小的是一张照片，大的是相册中的一页。(x，y，width，height)
我已经问过这样的问题，并得到了一个很好的答案()，但我忘了在那里提到，小图像的大小可能与大图像中该图像的大小不同。此
浏览 3提问于2013-01-18得票数 2
回答已采纳
2回答
给定一个大小为n的无向图。如何计算图中有多少个大小为k的连接组件？假设为k<=n，并且输入图是连接的。
例如，给定一个[(0,1), (1,2)]的图。它具有3大小为1的连接组件、2大小为2的连接组件和1大小为3的连接组件。
浏览 26提问于2020-06-01得票数 0
2回答
我有一个容器，里面有一个100%宽的div，两个小的是50%。切换按钮隐藏大div并显示小的两个，反之亦然。right:0px;width:50%;display:none;.center {}
在这三个中的每一个都有一个高图表图。当我运行代码时，我首先看到的是大div.center，它很好。当我切换到小的两个(.left和.rigth)时，图的内部svg呈现
浏览 4提问于2013-11-18得票数 0
回答已采纳
1回答
arc的核心绘图内存消耗问题
、、、、
我正在建立一个图形相关的应用程序与弧启用其中有两个不同的视图在图形上：-One是一个小的视图，我必须改变点击一个按钮(使用重新加载数据)。-The第二个视图是当单击"1天“、"3天”、"5天“等按钮时，图形会发生变化的大视图。
我面临的问题是，在连续使用15-20分钟后，应用程序崩溃，并显示日志...当我在Profile上分析时，我知道当小图加载活动字节时跳跃2-3MB，而当大图加载活动字节跳跃4到5MB时，活动字节永远不会下降。我在离开视
浏览 2提问于2013-01-03得票数 4
嗨，我知道如何在屏幕上获得点击的位置。我的问题是我需要得到图像点击的X和Y值。如果我的图像尺寸比设备小，它工作得很好，但当使用大图像时，它就会出错。
我使用水平和垂直滚动视图来显示大图。
浏览 1提问于2013-03-08得票数 0
我正在尝试完成以下任务:我有一个页面，其中有几个图像，1是大的，是主图像，然后是下面的几个图像，它们的大小较小。我想要做的是，当用户单击其中一个较小的图像时，该图像将被加载并替换主产品图像。
浏览 0提问于2017-06-07得票数 0
2回答
我正在考虑用于绘制函数、xy点、箱形图等的函数。我不需要大量的定制，只需要绘制这些类型的图表的基本功能。
浏览 0提问于2011-06-03得票数 0
回答已采纳
2回答
我已经使用GraphX API加载了一个大图和一个小图(这是我的查询)，并且我想做什么来检查大图是否包含查询图。我使用GraphX在web上搜索了关于子图/图的查询，但我找不到任何关于这方面的信息。
浏览 2提问于2015-10-17得票数 0
我试图动画的变化之间的布局之间的Cytoscape.js图。... var options = {
name
浏览 7提问于2016-05-25得票数 2
回答已采纳
2回答
但我喜欢让大图可点击(不仅仅是拇指)，这样当我点击显示为大图的图像时，另一个大图就会在新窗口中打开。
任何想法都是非常感谢的。谢谢。
浏览 0提问于2012-08-06得票数 0
回答已采纳
我有一个非常简单的产品图像布局和一个未知数量的alt图像在它的右边。我尝试了一些简单的jQuery，但它似乎没有给我想要的布局。
浏览 2提问于2011-06-28得票数 0
回答已采纳
1)大图下方四张小图。当单击其中一个小图像时，页面将在较大位置重新加载较小的图像。如何发送点击信息？谢谢..。
浏览 0提问于2011-01-21得票数 0
回答已采纳
2回答
制作饼图小图JS
、、、、
我的sharepoint页面上有一个不会缩小的饼形图。我做的px越小，图表就越大。" height="200px" ></canvas><canvas id="myChart2" width="800px" height="200px" ></canvas>
使饼图变小我正在使用Chart.JS的一些java。
浏览 3提问于2017-05-19得票数 6
回答已采纳
我正在使用绘制leaflet.js上的热图。我能把它渲染得很漂亮。但是，假设初始窗口/div大小为400x400。然后我调整窗口的大小，div变成600x600，热图层仍然在400x400大小，并且被切断。当你移动地图，你可以看到切碎的400x400区域的热图。
无论怎样调整大小还是重新设置大小？
浏览 2提问于2015-10-12得票数 1
回答已采纳
4回答
我可以通过迭代大图像中的相关data属性并添加小图像中的像素来完成此操作。但是，有没有更简单、更整洁的方法呢？我在用EMGU。然而，这不起作用，大图像也不会改变大<e
浏览 1提问于2011-06-17得票数 1
每一行将在下面的示例之间交替：小图像|大图像以此类推...<div class="row"> LARGE
浏览 2提问于2013-02-27得票数 0
我有一个页面，我当前在其中显示一个大图(用jqplot制作)，然后是一个带有一系列小图的侧边栏。
我希望能够做的是根据用户单击的较小的图来更改显示的大图(而不必重新加载页面)。
浏览 2提问于2011-04-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
