如何在jquery图片幻灯片顶部添加文本？

Question

我正在尝试在每张图片的顶部添加随幻灯片一起消失的文本。

我试图用文本添加另一个div，但是javascript幻灯片仅将文本作为我不想要的另一张幻灯片。

我也尝试过将jquery更改为抓取div类，希望文本显示在顶部，但仍然无法正常工作

原始JS FIDDLE

我的JS小提琴

 $(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

对这个 ？

 $(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>