使用jquery滑块在图像上显示文本

Question

我在这里实现了easySlider http://cssglobe.com/lab/easyslider1.7/02.html 现在我想在图像上显示一些文字，如http://themeforest.net/item/community-innovation/full_screen_preview/101572

我看到两者都是不同的插件，但我想使用easySlider插件并显示文本。我尝试了一些东西，比如获取alt文本并将其显示在图像上但是没有用。有什么想法吗？

问候

Answer 1

您需要将文本换行到每个图像后面的元素，如下所示：

<li>
  <img src="[whatever]"/>
  <div>Here comes my text</div>
</li>

然后使用CSS定位，将<li>的{​​{1}}属性设置为position，将relative设置为保存文本的absolute， <div> / top / right / bottom属性，具体取决于您的设计。

left

注意：如果您需要IE6支持，请使用CSS中#slider li { position: relative; } #slider div { left: 10px; right: 10px; bottom: 10px; position: absolute; } 的{​​{1}} / left + right属性，而不是width + { {1}}。

Answer 2

而不是使用<li>，您可以使用<p>和<span>作为文字，因此代码将为：

<p><img src=""/><span>Here the text</span></p>

这样代码就有效了：）