开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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;）。
大图路径错误:
- 检查data-large-src属性的值是否正确，确保路径相对于当前页面有效。

通过以上方法，可以有效实现点击小图切换大图的功能，并解决常见的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS点击切换背景图

JS点击切换背景图效果演示概述本文讲解如何实现一个比较好看的功能，通过点击可以自由的切换屏幕的背景。...cursor: pointer; } .pic img { width: 100px; } JS...循环注册事件给每一张图片添加事件 for (var i = 0; i < imgs.length; i++) { // 当点击的时候会发生将这张图片本身赋值给当前文件...循环注册事件给每一张图片添加事件 for (var i = 0; i < imgs.length; i++) { // 当点击的时候会发生将这张图片本身赋值给当前文件

721 0

【demo50】背景图点击切换

KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> 背景图点击切换...-- 一张大图背景虚化作为背景(加透明度蒙版) --> 图改变放置图片容器的视区和视窗实现蒙版中心透明的效果 --> js...cover和contain的区别 */ background-size: cover; transform: 0.4s; } /* 伪元素设置大背景(黑色蒙版) 节省一个类名 */ body...} .left-arrow { left: calc(15vw - 65px); } .right-arrow { right: calc(15vw - 65px); } script.js

9362 0

vue图片加载（默认图、小图、加载图、大图、加载失败图）

为了解决上述问题，如果小图可以加载，则直接使用小图，如果小图不能加载，则先使用加载中的图片去渲染，当原图加载成功以后，渲染上对应的原图，如果当原图也渲染失败（比如服务器响应客户端最大时间为30秒，网速过慢导致该时间内未完成...", // 小图加载失败，会先使用loading图片占位，避免页面卡顿，等待大图加载完成使用大图 small: "https://xixixi.net.cn/resources/images...https://xixixi.net.cn/resources/images/error.png", }, { text: "使用加载失败图片", // 小图和大图地址都加载失败...，大图可以使用时返回大图地址 } } bigImage.onerror = function() {..., bigImg}) // 2.根据图片信息进行处理 .then((res) => { el.setAttribute('src', res) // 6.使用小图或者大图渲染界面

4K0 0

文章样式二：顶部大图+小图

信息构建：构建系统的程序或信息流（譬如对电话树系统就是一个选项树形图，对于一个网站就是一个显示页面层级关系的站点导航图）。

8383 0

原生微信小程序轮播图点击放大

swiper> image标签中的 data-src=’{ {item}}’ data-list=’{ {goods.thumbs}}’ bindtap=“previewImage” 是解决轮播图片可点击放大的解决代码...参见微信小程序中的图片预览api~ previewImage:function(e){ var current=e.target.dataset.src;

1.1K3 0

mpvue小程序轮播图绑定动态点击事件

分享一个mpvue小程序轮播图绑定动态点击跳转页面，这个源码可以直接引用。用微信原生的轮播图也可，不过由于设计稿需要，我才改写了指示点的样式。

1.1K1 0

小程序点击轮播图跳转到tab导航界面

需求：小程序点击轮播图跳转到tab导航界面，效果如下所示 ?...点击轮播图的图片，跳转到我的界面上先实现以下的代码，在以下的基础上，开始实现需求微信小程序底部导航栏 https://www.jianshu.com/p/89a63dc99839 微信小程序轮播图...https://www.jianshu.com/p/bc3261557031 wxml部分一切准备好之后，在wxml文件里面，我们要使用 bindtap在图片上绑定一个事件，在js里面写事件函数的具体操作...-- 绑定一个事件，在js里面写事件函数的具体操作 --> js部分写一个click_swiper函数，函数执行的是，当点击图片上的事件的时候...click_swiper:function(e){ // 当点击图片上的事件的时候，触发这个函数 wx.switchTab({ // 因为是跳转到tab界面，所以使用switchTab

1.5K4 1

JS中利用JQuery模拟点击图片放大效果，支持多图

类似模态框，当然用其他插件可能更方便引入jQuery，然后给所有要实现点击弹出放大效果的图片添加一个类名为imglist 然后在js中使用如下代码： $(".imglist").click(function

5032 0

最新综述| A Survey on Graph Condensation 如何有效将大图压缩为小图?

大规模图的分析对计算效率和资源需求提出了重大挑战。最近，图缩合(Graph Condensation)作为一种解决方案出现，以解决图数据量不断增加所带来的挑战。...GC的动机是将大图的规模缩小到较小的图，同时为下游任务保留必要的信息。...由于图数据集的丰富性，图缩合算法的研究涉及单图和多图的场景。...图指导该类型方法主要是以原始数据集为导向，提取得到类似属性的缩合图，其中对于图属性的定义和相似性评估是该类方法的关键。根据图信息所属域的不同，我们将该类目标进一步分为图数据的谱域和空间域方法。...目标比较三种类型的目标，即图指导、模型指导和混合方法，对应其优点和缺点的讨论如下：图指导：为了产生“相似”的缩合图，图指导目标侧重于保留原始图的属性。这适用于需要保留原始图中的模式的应用程序。

6400 0

ViewPager 实现 Galler 效果, 中间大图显示，两边小图展示

正常情况下, ViewPager 一页只能显示一项数据, 但是我们常常看到网上，特别是电视机顶盒的首页经常出现中间大图显示两端也都露出一点来，这种效果怎么实现呢？...先上一张效果图：大家第一眼肯定想到了Gallery，这是最早android图库自带的效果，现在基本不用，那有没有其他好的办法呢？...后面在网上了搜了一下, 发现要实现上面的效果，我们需要注意两个方面，首先是怎么在两边显示两个小图，第二，怎么实现无限滑动。...@Override public void onClick(View view) { ToastUtils.showToast("你点击了

4K5 0

ViewPager 实现 Galler 效果, 中间大图显示，两边小图展示（优化篇）

上一张效果图：之前的项目有一个Galley的项目，但是代码结构特别乱，别问我为什么，我也是刚接手这个项目，为了方便以后阅读和维护我对一些模块进行了重构。...上一篇实现了简单的效果，但是对于初始的时候左边滑动是有问题的，这是因为我们在自己的Adapter的时候对于getCount，我们想通过Integer.MAX_VALUE来实现无限循环，简单的说这个是向右（无限大）...@Override public void onClick(View view) { ToastUtils.showToast("你点击了

1.6K9 0

CSS-用伪类制作小箭头（轮播图的左右切换btn）

先上学习地址：http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常，不是简单地用b...

2.7K8 0

jquery图片幻灯片（小图列表，大图展示）

先来个效果图（没有服务器，没办法提供演示版）效果不如FLASH版的好，接下来我就发出FLASH版的来全部代码如下所示 js/jquery.js"> <% p_id=request("p_id") sql1="select * from [share_pic] where p_id="&p_id set

2.3K2 0

flashflex图片幻灯片（小图列表，大图展示）

先看图片再上源码此效果jquery版的请看此处：http://www.cnblogs.com/liulun/archive/2010/11/07/1871145.html jquery版的没有这个

4005 0

微信小程序图片放大预览效果的实现，轮播图点击放大预览

近期很多刚学习小程序的同学，想做哪种图片点击放大，然后可以左右滑动预览的效果。我也特意去研究下，发现直接用微信程序自己的api就可以很方便的实现。今天就来教大家如何实现小程序图片点击放大的效果。...1-3，把image.js的完整代码贴出来。...然后定义一个方法，在点击图片时实现图片放大预览的效果。其实代码就这么多，我们就可以轻松的实现小程序图片的点击放大效果了。是不是很简单。...二，轮播图点击放大预览其实我们的轮播图也是可以实现点击放大的。 2-1，效果图首先是轮播图如下 ? 可以看出我们有三张轮播图，点击放大后的效果 ? ?...，外加一个点击事件 2-3，js代码的实现其实和我们上面多图片实现的代码一样 Page({ data: { imgList: [ "https://ss0.bdstatic.com

5.6K3 0

搞事情，jquery插件收费源码 --- 基于swiper带视差切换效果的轮播图

本次分享的轮播图异于常规之处在于：带有视觉误差。源码下载地址:。。。本文的重点是想办法下载jquery插件库里面的收费资源（不付钱）。本例就已该demo为例。...先开一个资源可以看到页面链接地址为：http://www.jq22.com/jquery-info17466 点击下载看到页面会给一下提示信息，右键按钮查看源码，发现调用的是xz() 函数...在右侧源码区域搜索函数，得到以下一段代码即使后台对数据进行了处理，那先看一下不需要收费的资源返回的data数据得到 data = 'download/myscroll1796201712192341

1.7K1 0

小程序商店更新：移动版新增轮播图，详情页大更新

贴士：在知晓程序（微信号 zxcx0101）后台，点击下方「程序商店」菜单栏按钮，即可进入小程序商店移动版。新增轮播图、新锐榜和口碑榜以前，小程序商店只能使用分类查看所有小程序。...继昨天的更新上线模糊搜索后，移动版小程序商店终于有了桌面端的轮播图。你可以在轮播图中，看到我们精选的优秀小程序了。同时，新锐榜和口碑榜这次也出现在了移动版小程序商店。...小程序详情页大更新现在，小程序详情页变得更加简洁、清晰了。你可以在详情页中了解相应小程序的截屏和介绍，还能看到其他人如何评价这款小程序。...同时，在小程序详情页的首屏中，你可以点击「尝鲜」按钮直接复制相应小程序名称，不需要再拖动到底部点击「一键复制」了（当然，「一键复制」按钮依然为你保留）。...目前，点击「尝鲜」或「一键复制」的结果将会是正确的。此次移动端更新内容就是这些了。不知道大家是否喜欢这些新功能呢？如果对商店还有什么意见或者建议，抑或是反馈 bug，都可以在留言区告诉我们。

1.9K3 0

【说站】动态图大全带文案支持收藏微信小程序源码

本文编程笔记首发这是一款自动采集动态图内容的一款小程序特点是每次刷新界面都会随机刷新动态图每一个动态图都会带有对应的文案总得来说小编也不知道说什么!...该小程序支持流量主功能好了不多说了,大家自行研究吧!下面我们就来看看小编的测试演示图付费资源您需要注册或登录后通过购买才能查看！收藏 | 0点赞 | 0打赏

3872 0

这家帮迅雷、小咖秀鉴别“小黄图”的公司要做视频大生意

于是图普科技想到让它理解“小黄图”。图普是一家图像识别云服务公司，接入它的API，上传图片，服务器就能以一定的准确性解读图片。...图片来自图普官网截图鉴别小黄图听起来像是个苦力活，但与其它类型的图像一样，用的也是深度学习技术。...图普表示，与国内主流的直播和短视频平台，如17、风云直播、小咖秀等都有合作，接入的数据多，覆盖全面。 ? 李明强 / 图片来自图普科技做到这一点的前提是找到方向和需求。...后来由于快播事件，他们发现内容审核对很多社交及云平台都是刚需，才做起了鉴别小黄图。不过鉴黄并不是图普的目标。也许是继承了腾讯的基因，李明强给图普的定位是给视频时代建立连接。...看来，鉴别小黄图还只是开始。

1.4K7 0

【说站】【已测】云开发版粉色ui微信小程序源码背景图头像壁纸小程序源码带流量主

本文编程笔记首发【已测】云开发版粉色ui微信小程序源码/背景图/头像/壁纸/小程序源码带流量主云开发小程序源码无需服务器和域名即可搭建小程序另外还带有流量主功能噢！...微信平台注册小程序就可以了这套粉色UI非常的好看，里面保护有背景图、头像、壁纸，另外里面还带有跳转到其他小程序的付费资源您需要注册或登录后通过购买才能查看！

4223 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭