Question

我有这个大图像显示，在底部我有小图像，我希望大图像到我正在盘旋的图像，如果可能的话。谢谢。
这是我的代码。

<div class="wrapper">
    <div class="inner">
        <img src="img/1.png" alt="image 1">
    </div>
    <ul class="small">
        <li> <img src="img/1.png" alt="image 2"> </li>
        <li> <img src="img/2.png" alt="image 2"> </li>
        <li> <img src="img/3.png" alt="image 2"> </li>
        <li> <img src="img/4.png" alt="image 2"> </li>
        <li> <img src="img/5.png" alt="image 2"> </li>
    </ul>
</div>

这是我的jquery但不起作用。

<script type="text/javascript">
$(document).ready(function() {
        $('.small').hover(function() {
            $('.inner img').attr('src' = '.small img src')
        });
});
</script>

Answer 1

试试这个：

$(document).ready(function () {
    $('.small img').hover(function () {
        $('.inner img').attr('src' ,this.src)
    });
});

演示here

Answer 2

.attr("src", "small img src");

以上是将参数传递给方法的JavaScript语法。 'string' = 'string'根本不是有效的JavaScript语法。

Answer 3

替换它：

$('.inner img').attr('src' = '.small img src');

使用：

$('.inner img').attr('src' = $(this).attr('src'));

问题是，.small img src不返回属性值。

Answer 4

$(document).ready(function () {
    $('.small li').hover(function () {
        var tmpUrl = $(this).find("img").attr('src');
        $(".inner img").attr("src", tmpUrl);
    });
})

Answer 5

你的逻辑中有一个小错误，

尝试将脚本重写为，

$('ul.small img').hover(function ()
{
  $('.inner img').attr('src' ,$(this).attr('src'));
});

我可以在jquery悬停上更改图像吗？

5 个答案:

演示here