Question

我已经采取并基本上轻微修改了一个jQuery图像滑块来操作我想要的，特别是一个名为：一个美丽的Apple风格幻灯片图库与CSS＆amp; 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 */ }

jQuery幻灯片，包含包含图像特定文本的单独div

1 个答案: