Question

我正在使用jquery cycle2插件进行幻灯片放映。现在我正面临挑战。我可以使用该插件制作幻灯片，但我想在图像上面写一些文字，文本只需要出现在特定图像上。但是如果我使用幻灯片div位置相对而文本div位置绝对使用css什么都没发生。

代码HTML：

<div class="offset1 span12 cycle-slideshow">
    <img src="assets/img/1.jpg">
        <div id="text1">
            <strong>A</strong><span>lpha</span>
        </div>
    <img src="assets/img/2.jpg">
    <img src="assets/img/3.jpg">
</div>

代码CSS：

.cycle-slideshow {
position: relative; 
}
#text1 {
    position: absolute; 
    top: 200px; 
}

Anyhelp会非常高兴。

Answer 1

按照described in the documentation：

步骤操作

在循环幻灯片中添加类.cycle-overlay的div
- 添加CSS规则
在幻灯片上添加data-cycle-title和data-cycle-desc属性。如有必要，请留空。

Demo here

Answer 2

这可能会有所帮助u.if stil这不工作意味着你的幻灯片div可能包含比你的文本div大的z-index

.cycle-slideshow {
position: relative; 
z-index:1;

}
#text1 {
    position: absolute; 
    top: 200px; 
    color:#fff;
    z-index:2;

}

http://jsfiddle.net/TDSFF/

图像幻灯片上的文本 - jQuery cycle2

2 个答案: