css - 如何制作一个简单的纯 css 或 jquery 图像切换？

Question

令人惊讶的是，我无法找到一个简单的解决方案，而且我对 jquery 还很陌生。我更愿意使用纯 css，但对简单的 jquery 解决方案持开放态度。

我想要一张大图。在大图下方有一些小图，包括大图的小版本。单击任何一个小缩略图时，它将变成大图像。

<div class="large-image-wrapper">
    <img src="/link/to/image1" class="large-image"/>
    <img src="/link/to/image2" class="large-image"/>
    <img src="/link/to/image3" class="large-image"/>
</div>

<div class="small-image-wrapper">
    <img src="/link/to/small-image1/" class="small-image"/>
    <img src="/link/to/small-image2/" class="small-image"/>
    <img src="/link/to/small-image3/" class="small-image"/>
</div>

Answer 1

找到了可能对您有所帮助的帖子: Javascript: Clicking thumbnails to switch a larger image. Best method?

-- 还有一个 jsfiddle: http://jsfiddle.net/Qhdaz/2/

$(function(){
    $(".large-image-wrapper img:eq(0)").nextAll().hide();
    $(".small-image-wrapper img").click(function(e){
        var index = $(this).index();
        $(".large-image-wrapper img").eq(index).show().siblings().hide();
    });
});