为简单的幻灯片添加标题

Question

我使用了一个简单的jquery幻灯片，我在网上找到了这个：

HTML：

<div class="fadein">
 <img src="1.jpg" width="580" height="360">
 <img src="2.jpg" width="580" height="360">
 <img src="3.jpg" width="580" height="360">
</div>

CSS：

body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; width:580px; height:360px; }
.fadein img { position:absolute; left:0; top:0; }
.fadein img {
  box-shadow: 0 0 4px #666;
  -moz-box-shadow: 0 0 4px #666;
  -webkit-box-shadow: 0 0 4px #666;
  -o-box-shadow: 0 0 4px #666;
  -ms-box-shadow: 0 0 4px #666;
}

的JavaScript：

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

我想出了如何将盒子阴影添加到图像中。我想为每个图像添加半透明字幕。我该怎么做？

Answer 1

你在寻找这样的东西吗？：

http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

或更新的

http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited

Answer 2

代码的工作示例

Example on Fiddle

CSS

body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; width:580px; height:360px; }
.fadein div.slide { position:absolute; left:0; top:0; width:580px; height:360px;}
.fadein div.slide {
box-shadow: 0 0 4px #666;
-moz-box-shadow: 0 0 4px #666;
-webkit-box-shadow: 0 0 4px #666;
-o-box-shadow: 0 0 4px #666;
-ms-box-shadow: 0 0 4px #666;
}
div.slide img {
position:absolute;  z-index:1;}
div.slide h2 {
position:absolute; top:20px; z-index:2; margin:0; padding:0; font-size:2em; background:rgba(32, 34, 38, .4); line-height:2.1em; font-weight:normal; color:#ffffff; margin-bottom:2px; clear:both; padding:1px 7px; float:none;
}

的Javascript

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

HTML

<div class="fadein">

    <div class="slide"><img src="http://www.wallpaper4me.com/images/wallpapers/lifethroughdew-766931.jpeg" width="580" height="360" /><h2>The first Pic</h2></div>
    <div class="slide"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT698nzLZwHByltzr9IoJNbTjyJ7mHeHPgBsJP159GdjAPHT22A" width="580" height="360" /><h2>Here is the Second photo </h2></div>
    <div class="slide"><img src="http://www.gurucareersnetwork.com/wp-content/uploads/2013/03/Google-Tel-Aviv-Office-Flower-Pots.jpg" width="580" height="360" /><h2>last</h2></div>

</div>