Question

所以我在一个需要我使用表格的项目上，禁止我使用任何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秒更换一次图片。但我的第一个问题是优先级

提前致谢

Answer 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>

我希望它有所帮助：）

Answer 2

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

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

如何通过单击另一个图像来更改img src

2 个答案: