Javascript 如何通过单击另一个图像更改带有转换的img src_Javascript_Jquery_Html

Javascript 如何通过单击另一个图像更改带有转换的img src

javascript jquery html

Javascript 如何通过单击另一个图像更改带有转换的img src,javascript,jquery,html,Javascript,Jquery,Html,所以我在做一个项目，它要求我使用table，并且禁止我使用任何div标记我想在我桌子的一行做一个滑块。我希望通过单击第二行中的其他图像来更改图像。我使用以下代码成功地做到了这一点： function changeImage(a) { document.getElementById("imgblockjs").src=a; } 以及html： <HTML> <HEAD> <TITLE> Home -- RTR </TITLE>

所以我在做一个项目，它要求我使用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非常陌生，还没有学习所有的基础知识，我在互联网上获得了上面的jquery代码，并对其进行了一些修改，认为它可以工作。但事实并非如此

有人能修好吗？或者使用不同的代码？基本上，我希望属性src被更改，而不是在另一个上面有图像。但如果不可能，我愿意接受任何建议

如果可能的话，我计划每5秒使用transition自动更改一次图片。但我的第一个问题是优先权

提前谢谢

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

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

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

您可以使用JQuery动态更改该图像我已将类添加到图像中，以便可以使用类访问它们主图像：添加类“fullimage” 小图像：添加类“changeimage”

$（'.changeimage'）。单击（函数（）{
//获取当前单击的图像源
var clickedItemImage=$（this.attr（'src'）；
//设置主映像的src
$（“.fullimage”）.attr（'src'，单击编辑图像）；
});
您可以使用JQuery动态更改这些图像
我已将类添加到图像中，以便可以使用类访问它们
主图像：添加类“fullimage”
小图像：添加类“changeimage”

$（'.changeimage'）。单击（函数（）{
//获取当前单击的图像源
var clickedItemImage=$（this.attr（'src'）；
//设置主映像的src
$（“.fullimage”）.attr（'src'，单击编辑图像）；
});

两个锚定标记具有相同的id，这是错误的。你能更新你的代码片段吗谢谢，事实上我不知道是不是错了。我的观点是，我希望第一行上的大图像更改为我在第二行上单击的图像。两个锚标记具有相同的id，这是错误的。你能更新你的代码片段吗谢谢，事实上我不知道是不是错了。我的观点是，我希望第一行上的大图像更改为我在第二行上单击的图像。我粘贴了它，但它不起作用。你能解释一下吗？这样我就可以把代码修改成适合我的项目了？谢谢，我贴了，但没用。你能解释一下吗？这样我就可以把代码修改成适合我的项目了？谢谢你的回答，但它仍然没有任何转变。我试图通过单击切换图像，但无法使用淡入过渡。为什么不淡出主图像，并在其源更改后淡入？谢谢回答，但它仍然没有任何过渡。我试图通过单击切换图像，但无法使用淡入过渡。为什么不淡出主图像并在其源更改后淡入。？
$("img").on("click", function(){
   $("#imgblockjs").fadeOut(1000, function() {
       $("#imgblockjs").attr("src",this.src);
    }.bind(this)).fadeIn(1000);
 });