如何通过点击另一个图像来改变img src的转换

问题描述：

所以我在一个需要我使用表格的项目中，并且禁止使用任何div标签。如何通过点击另一个图像来改变img src的转换

我想在我的表的一行中做一个滑块。我希望图像可以在第二行中点击其他图像而改变。我已经成功使用此代码做：

function changeImage(a) { 
    document.getElementById("imgblockjs").src=a; 
}

和HTML：

<HTML> 
<HEAD> 

<TITLE> 
    Home -- RTR 
</TITLE>  

<LINK REL="ICON" TYPE="IMAGE/PNG" HREF="../img/logo.png" /> 
<SCRIPT src="../script.js"></SCRIPT> 

</HEAD> 
<BODY> 
    <table border="0" width="100%" height="10px" cellspacing="0"> 

    <tr> 
     <td colspan="4" > 

      <img id="imgblockjs" src="../img/singa.jpg" width="100%" height="300px" /> 

     </td> 
    </tr> 

    <tr> 
    <td colspan="4" id="imgchanger"> 

    <a href="#"><img src="../img/singa.jpg" id="imgthumb1" onclick="changeImage('../img/lion.jpg');"></a> 
    <a href="#"><img src="../img/gajah.jpg" id="imgthumb2" onclick="changeImage('../img/elephant.jpg');"></a> 

    </td> 
    </tr> 

    </table> 

</BODY> 
</HTML>

但是，代码没有任何过渡。

我使用jQuery的尝试：

$("#imgthumb1").click(function() { 
    $("#imgblockjs").fadeOut(1000, function changeImage(a) { 
     document.getElementById("imgblockjs").src=a; 
    }).fadeIn(1000); 
    return false; 
});

我其实是很新的jQuery和没有学习所有的基础知识，我就上网以上jQuery代码和修改它一下，认为它会起作用。但事实并非如此。

有人可以修复它吗？或者也许使用不同的代码？基本上我想要改变属性src而不是将图像放在另一个之上。但如果这是不可能的，我愿意接受任何建议。

此外，如果可能，我计划使用过渡自动更改图片每5秒。但我的第一个问题是优先提前

两个锚标记具有相同的ID这是不对的。你能否请更新你的代码片段 – brk

谢谢，实际上我不知道它是否是错误的b4。我的观点是我想要第一排上的大图像变成我在第二排点击的图像 –

答

$("img").on("click", function(){ 
    $("#imgblockjs").fadeOut(1000, function() { 
     $("#imgblockjs").attr("src",this.src); 
    }.bind(this)).fadeIn(1000); 
});

感谢如果图像被点击时，把＃改成imgblockjs.src这个图片的src ...

我粘贴了它，但它没有奏效。你能否添加解释，以便我可以将代码调整到我的项目中？谢谢 –

@JavaughnIrawan哦，它可能会因为上下文丢失，请稍等片刻... –

答

您可以更改图片动态使用JQuery 我已经加入了类的图像，这样我可以使用类访问它们主影像：添加类“fullimage” 小图片：添加类“changeimage”

$('.changeimage').click(function(){ 
 
    //getting the current clicked image source 
 
    var clickedItemImage=$(this).attr('src'); 
 
    //setting the src of your main image 
 
    $(".fullimage").attr('src',clickedItemImage); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 

 
    <table border="0" width="100%" height="10px" cellspacing="0"> 
 

 
    <tr> 
 
     <td colspan="4" > 
 
      <img id="imgblockjs" class="fullimage" src="../img/singa.jpg" width="100%" height="300px" /> 
 

 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
    <td colspan="4" id="imgchanger"> 
 

 
    <a href="#"><img class="changeimage" src="../img/singa.jpg" id="imgthumb"></a> 
 
    <a href="#"><img class="changeimage" src="../img/gajah.jpg" id="imgthumb"></a> 
 

 
    </td> 
 
    </tr> 
 

 
    </table>

我希望它能帮助:)

感谢您的回答，但它仍然没有任何转换。我设法通过点击切换图像，但无法通过淡入淡出进行切换。 –

为什么不淡出主图像并在信号源改变后淡入？ –

如何通过点击另一个图像来改变img src的转换

相关推荐