如何将点击图片的src传递给函数以更新另一张图片

API 探路者

2026-6-30

解决方案：点击小图同步切换大图并跳转HTML5播放器时间

方式一：保留原有内联点击事件，仅修改大图切换逻辑

直接修改你的jQuery代码，通过$(this)获取当前点击图片的src属性，替换固定路径即可：

$(document).ready(function() {
    $('.ib').click(function() {
        // 获取当前点击图片的src路径
        const targetSrc = $(this).attr('src');
        // 更新大图的src属性
        $('#large-image').attr('src', targetSrc);
    });
});

方式二：统一用jQuery管理点击事件（推荐）

为了代码更易维护，建议把播放器跳转时间通过data-time属性嵌入HTML，然后在jQuery事件中统一处理跳转和大图切换：

修改后的HTML代码：

<img class="ib" src="/image1.PNG" data-time="500">
<img class="ib" src="/image2.PNG" data-time="1000">
<img class="ib" src="/image3.PNG" data-time="1200">
<img class="ib" src="/image4.PNG" data-time="1500">
<img class="ib" src="/image5.PNG" data-time="1800">
<img class="ib" src="/image6.PNG" data-time="2000">

<img id="large-image" src="/image1.PNG">

对应的jQuery代码：

$(document).ready(function() {
    $('.ib').click(function() {
        // 获取当前点击图片的src和跳转时间
        const targetSrc = $(this).attr('src');
        const jumpTime = $(this).data('time');
        
        // 切换大图
        $('#large-image').attr('src', targetSrc);
        // 跳转播放器到指定时间
        player.setCurrentTime(jumpTime);
    });
});