如何在jQuery圖像幻燈片上添加文本？

Question

我試圖在幻燈片放映的每張圖片上添加文字。

我試着添加另一個div與文本，但然後JavaScript幻燈片拿起文本作爲另一張幻燈片，我不想。

我也試圖改變jQuery來抓住DIV類，希望該文本將出現在頂部，但它仍然無法正常工作

原始 JS FIDDLE

MY ATTEMPT JS Fiddle

$(function(){ 
 
    $('.fadein .slideimg:gt(0)').hide(); 
 
    setInterval(function(){ 
 
    $('.fadein :first-child').fadeOut() 
 
    .next('.slideimg').fadeIn() 
 
    .end().appendTo('.fadein');}, 
 
    3000); 
 
});

.fadein { position:relative; width:500px; height:332px; } 
 
.fadein img { position:absolute; left:0; top:0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fadein"> 
 
    <div class="slideimg"> 
 
    <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
 
    <p>Slideshow text</p> 
 
    </div> 
 
    <div class="slideimg"> 
 
    <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
 
    <p>Slideshow text2</p> 
 
    </div> 
 
    <div class="slideimg"> 
 
    <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
 
    <p>Slideshow text3</p> 
 
    </div> 
 
</div>

Answer 1

關於th是？

$(function(){ 
 
    $('.fadein div:gt(0)').hide(); 
 
    setInterval(function(){ 
 
    $('.fadein div:first-child').fadeOut() 
 
    .next('.slideimg').fadeIn() 
 
    .end().appendTo('.fadein');}, 
 
    3000); 
 
});

.fadein { position:relative; width:500px; height:332px; } 
 
.fadein img { position:absolute; } 
 
p { position:absolute; left:0; top:0; padding:10px; margin:10px; background:#fff; border-radius: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fadein"> 
 
    <div class="slideimg"> 
 
    
 
    <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
 
    <p>Slideshow text</p> 
 
    </div> 
 
    <div class="slideimg"> 
 
    
 
    <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
 
    <p>Slideshow text2</p> 
 
    </div> 
 
    <div class="slideimg"> 
 
    
 
    <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> 
 
    <p>Slideshow text3</p> 
 
    </div> 
 
</div>