javascript - 带有包含图像特定文本的单独 div 的 jQuery 幻灯片

Question

我已经采用并基本上稍微修改了一个 jQuery 图像 slider 来操作我想要的方式，特别是一个名为:一个漂亮的 Apple 风格的幻灯片画廊与 CSS 和 jQuery。

我目前正在尝试将此幻灯片链接到下面包含图像特定文本的单独 div，我通过超链接每个缩略图以加载我想要的每个图像的内容，以非常简单的方式实现了这一点。

理想情况下，我希望通过使用幻灯片放映的下一个和上一个控件来实现这一点，但我尝试了多种解决方案但均未成功。我当前尝试加载图像 1 和图像 2 的文本，但从那里开始卡住了。

我尝试的 html、css 和 JavaScript 可以在 http://jsfiddle.net/v9vf9/ 找到。 (结果显示不正确，因为我所有的文件目前都存储在本地)

我确信我想要实现的目标不是很复杂，但似乎超出了我的能力范围，我感谢任何建议、帮助或解决方案来成功实现这一目标!!并期待提高我的知识。

提前谢谢你，卡尔

Answer 1

所以，正如评论中所建议的那样

http://jsfiddle.net/lollero/Sw4y8/

将文本放入动画幻灯片中会更容易一些，这样它们会自动与图像一起动画，最重要的是为 #slides 元素提供更大的高度以适合文本。

HTML:

    <div class="slide">
        <img src="http://placekitten.com/g/500/230" alt="" />
        <div class="text">Text</div>
    </div>

</div>

<div id="thumbnails">Thumbnails</div>

CSS:

#slides {
    height: 550px; /* or what ever amount is big enough to fit the text there too */
    float: left;
    position: relative;
    z-index: 5;
}

#thumbnails {
    float: left;
    clear: both;
    position: relative;
    z-index: 10;
    top: -110px; 
}

.text { margin-top: 50px; /* for example if you want to give thumbnails room to sit above the text */ }