使用Javascript:
function Slider() {
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {
direction: 'left'
}, 500);
var sc = $(".slider div").size();
var count = 2;
setInterval(function() {
$(".slider #" + count).show("slide", {
direction: 'right'
}, 500);
$(".slider #" + count).delay(5500).hide("slide", {
direction: 'left'
}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
}
HTML:
<div class="slider">
<div id="1" style="position:relative">
<img src=". . ." />
<div>
<p style="width:350px; position:absolute; top:100px; left:10px">TEXT . . .</p>
</div>
</div>
<div id="2" style="position:relative">
<img src=". . ." />
<div>
<p style="width:350px; position:absolute; top:100px; left:10px">TEXT . . .</p>
</div>
</div>
<div id="3" style="position:relative">
<img src=". . ." />
<div>
<p style="width:350px; position:absolute; top:100px; left:10px">TEXT . . .</p>
</div>
</div>
</div>
所以我想做一个滑块。我有imgaes工作得很好,但我想在图像顶部做CSS文本。当我运行脚本时,它不会拉入文本div。它只是拉动图像。