基于轮播的图像库，带有缩略图和＆amp;标题

Question

对于图片库example，我需要这样的内容，还有其他功能，例如显示图片标题＆amp;图像来源为两个单独的标题。

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

小提琴示例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>

Answer 1

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

<强> DEMO

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