Question

我有一个工作的jsFiddle附加。是的，它有效，但我想要实现的目标似乎超出了我的经验。

此刻它会显示一行缩略图，当您点击其中一个时，它会显示与特色图片相同的图像。

我需要做的是能够将缩略图显示为与特色图像显示的不同图像。

例如，我有一个产品特色图像，该图像的缩放版本也将缩放。

缩略图1（放大裁剪版）/特色图片1

缩略图2（放大裁剪版）/特色图片2

缩略图3（放大裁剪版）/特色图片3

<img id="image" src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" border="0" />

<img src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" class="thumb" width='100px' />
<img src="http://smartyvet.com/site/wp-content/uploads/2014/05/happy5.jpg" class="thumb" width='100px' />
<img src="http://www.telegram.ee/wp-content/uploads/2013/11/a.aaa-Happy-animals.jpg" class="thumb" width='100px' />

$(document).ready(function () {
$(".thumb").click(function () {
    var dir = $(this).attr("src");
    $('#image').hide();
    $('#image').fadeIn('fast');
    $('#image').attr("src", dir);
});
});

这有意义吗？

非常感谢任何帮助。

干杯

Answer 1

在缩略图中添加一个数据标记，其中包含您要在点击时显示的图像的网址，而不是获取img的src获取数据属性值。

请参阅：https://jsfiddle.net/gq74rgc3/3/

<img data-big="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUM5JaTT3WP59hqqcL5pYEgcfyB4qUvzLFv4k5pzLqBeRsJaOi" src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" class="thumb" width='100px' />

和javascript：

$(document).ready(function () {
    $(".thumb").click(function () {
        var dir = $(this).data("big");
        $('#image').hide();
        $('#image').fadeIn('fast');
        $('#image').attr("src", dir);
    });
});

Answer 2

这样的东西？

$(document).ready(function () {
    var images_array = ["http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg","http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg","http://smartyvet.com/site/wp-content/uploads/2014/05/happy5.jpg","http://www.telegram.ee/wp-content/uploads/2013/11/a.aaa-Happy-animals.jpg"];
    $(".thumb").click(function () {
        var dir = $(this).attr("src");
        $('#image').hide();
        $('#image').fadeIn('fast');
        $('#image').attr("src", images_array[Math.floor((Math.random()*4))]);
    });
});

http://jsfiddle.net/xL3p0drv/1/

它从数组中获取一个随机索引并显示图像

点击

2 个答案: