如何通过单击另一个图像来更改带有过渡的 img src答案

【问题标题】：How to change img src with a transition by clicking another image如何通过单击另一个图像来更改带有过渡的 img src
【发布时间】：2017-05-07 20:10:04
【问题描述】：

所以我正在进行一个需要我使用 table 的项目，并禁止我使用任何 div 标签。

我想在表格的一行中制作一个滑块。我希望通过单击第二行中的其他图像来更改图像。我已经设法使用以下代码做到了：

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 相同，这是错误的。你能更新你的代码sn-p
谢谢，其实我也不知道是不是错了b4。我的意思是我希望第一行的大图像更改为我点击第二行的图像

标签： javascript jquery html

【解决方案1】：

您可以使用 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>

希望对你有帮助:)

【讨论】：

感谢您的回答，但它仍然没有任何过渡。我设法通过单击切换图像，但无法通过淡入淡出转换。
为什么不淡出主图，换源后淡入呢？

【解决方案2】：

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

如果单击图像，请将#imgblockjs.src 更改为此图像src...

【讨论】：

我粘贴了它，但它不起作用。您能否添加解释，以便我可以将代码调整到我的项目中？谢谢