如何制作一个简单的纯 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();
    });
});

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

How to make a simple pure css or jquery image toggle?

css

onclick

toggle