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

Question

I'm trying add text on top of each image that fades along with the slideshow.

I've tried to add another div with the text, but then the javascript slideshow picks up just the text as another slide which I don't want.

I've also tried changing the jquery to grabbing the div class, hoping the text would appear on top, but it still doesn't work

Original 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

About this ?

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