简单的图像变化

Question

我有一个大图像，基本上是一个项目封面照片，在它下面我有五个缩略图。

我想这样做，以便当您点击缩略图时，大图像将更改为与点击的缩略图相对应。

我不确定这是什么，所以我一直在研究它。

任何帮助都会很棒。

Answer 1

它被称为图片库/滑块。您通常需要javascript / jQuery来实现它。

以下是一些examples and tutorials

Answer 2

也许这样的事情会让你全面了解如何实现它

<div class="gallery">

    <div id="mainViewport" class="viewport">
        <img src="my-picture.jpg" alt=""/>
    </div>

    <ul class="thumbnails">
        <li><img src="imgs/my-picture-thumbnail.jpg" alt=""/></li>
        <li><img src="imgs/my-picture2-thumbnail.jpg" alt=""/></li>
        <li><img src="imgs/my-picture3-thumbnail.jpg" alt=""/></li>
    </ul>
</div>


<script>
    var mainViewport = $('#mainViewport');
    $('.thumbnails img').click(function(){
        var path = $(this).attr('src').replace('-thumbnail','');
        var mainImg = new Image();
        mainImg.src = path;
        mainViewport.html(mainImg);

    });   
</script>

现在您需要以这种格式存储缩略图'path / to / full / img-thumbnail.jpg'，这样您就可以为较小的版本添加'-thumbnail'，并在脚本中删除该部分获取完整大小的img路径并放置并替换mainViewport div中的当前img。

这是一个工作示例： http://jsfiddle.net/wbT4N/1/

请注意，我没有缩略图版本和这些图片的完整版本，我只是放置了一些虚拟.jpg，您应该同时使用这两个版本，并按照我的解释命名。

祝你好运