基于旋转木马的图像库与缩略图&标题

Carousel based image gallery with thumbnails & Captions

本文关键字：略图 amp 标题 旋转木马 图像      更新时间：2023-09-26

我需要像这样的图片库示例，并具有其他功能，如显示image caption&图片来源为两个独立的字幕。

我不知道如何自定义它以在大图像下添加两个标题。

小提琴示例http://jsfiddle.net/p118my3s/

任何指针

示例HTML

<div id="wrapper">
    <div id="prev">
        <a href="#" class="images">&uArr; </a>
        <a href="#" class="thumbs">&uArr; </a>
    </div>
    <div id="images">
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-aanhanger.gif" alt="ek-aanhanger" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-alien.gif" alt="ek-alien" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-artsen.gif" alt="ek-artsen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-brandweer.gif" alt="ek-brandweer" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-dommel.gif" alt="ek-dommel" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-freudiaans.gif" alt="ek-freudiaans" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-kamikazepiloot.gif" alt="ek-kamikazepiloot" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-langselkaarheen.gif" alt="ek-langselkaarheen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-perswee.gif" alt="ek-perswee" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-politiekannietzeggen.gif" alt="ek-politiekannietzeggen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-rollenpatroon.gif" alt="ek-rollenpatroon" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-suikerspin.gif" alt="ek-suikerspin" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-uitvallen.gif" alt="ek-uitvallen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-vaassen.gif" alt="ek-vaassen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-vreedzaamverzet.gif" alt="ek-vreedzaamverzet" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-zelfspotter.gif" alt="ek-zelfspotter" width="350" height="350" />       
    </div>
    <div id="thumbs">
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-aanhanger.gif" alt="ek-aanhanger" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-alien.gif" alt="ek-alien" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-artsen.gif" alt="ek-artsen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-brandweer.gif" alt="ek-brandweer" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-dommel.gif" alt="ek-dommel" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-freudiaans.gif" alt="ek-freudiaans" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-kamikazepiloot.gif" alt="ek-kamikazepiloot" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-langselkaarheen.gif" alt="ek-langselkaarheen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-perswee.gif" alt="ek-perswee" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-politiekannietzeggen.gif" alt="ek-politiekannietzeggen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-rollenpatroon.gif" alt="ek-rollenpatroon" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-suikerspin.gif" alt="ek-suikerspin" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-uitvallen.gif" alt="ek-uitvallen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-vaassen.gif" alt="ek-vaassen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-vreedzaamverzet.gif" alt="ek-vreedzaamverzet" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-zelfspotter.gif" alt="ek-zelfspotter" width="70" height="70" />
    </div>
    <div id="next">
        <a href="#" class="images">&dArr; </a>
        <a href="#" class="thumbs">&dArr; </a>
    </div>
</div>

由于您使用的是jquery，您可以通过索引为每张图片添加标题，并像这样显示/隐藏：

DEMO 

$(this).click(function () {
    $('#images').trigger('slideTo', [i, 0, true]);
    $('#captions .caption').hide();
    $('#captions .caption'+i).show();
});
相关文章：