Question

html代码：

<div class="largeimg">

<a class="slide-image"  href="javascript:void(0);"">
<img  src="200944393_aboutus.jpg">
</a>
<a class="slide-image"  href="javascript:void(0);"">
<img  src="200944393_aboutus_1.jpg">
</a>
<a class="slide-image"  href="javascript:void(0);"">
<img  src="200944393_aboutus_2.jpg">
</a>
</div>

右：

 <div class="thumbimg">

    <a class="thumb-image"  href="javascript:void(0);"">
    <img  src="200944393_aboutus.jpg">
    </a>
    <a class="thumb-image"  href="javascript:void(0);"">
    <img  src="200944393_aboutus_1.jpg">
    </a>
    <a class="thumb-image"  href="javascript:void(0);"">
    <img  src="200944393_aboutus_2.jpg">
    </a>
    </div>

垂直的三条拇指线，当鼠标悬停在拇指图像上时。在左侧显示其大图像。另外两个大图像被隐藏。

jquery代码：

$(".largeimg a").hide();
$(".largeimg a:eq(1)").show();

$('.thumbimg a').on({
    'hover': function() {
         var src = $(this).attr('src');

         $(".largeimg img").attr('src', src);
    }
});

这不对。如何纠正？谢谢你。

Answer 1

您从错误的元素获取源代码。在hover函数中，您从a标记获取源代码而不是内部图像，因此您需要执行此操作：

$(".largeimg a").hide();
$(".largeimg a:eq(1)").show();

$('.thumbimg a').on({
    'hover': function() {
         // Getting the source of the image, rather than source of hovered element.
         var src = $(this).find('img').attr('src');
         $(".largeimg img").attr('src', src);
    }
});

此外，正如评论中所述，您的HTML无效。你有很多双引号：

<a class="thumb-image"  href="javascript:void(0);"">

应该是

<a class="thumb-image"  href="javascript:void(0);">

要加上它，img是自我关闭的，所以它应该是<img src="200944393_aboutus_2.jpg" />

Answer 2

在要旋转的图像上尝试此操作

 $(document).ready(function(){

        $("#image").rotate({angle:45});
 });

如何显示在jquery中隐藏图像

2 个答案: