2017-05-05 58 views
0

添加一个标题图片我需要一些提示如何字幕在现有的滑盖信息添加到图像:在滑块

<style type="text/css"> 
 
    #slideshow 
 
    { 
 
    float: left; 
 
    width: 100%; 
 
    background-color: #EEEEEE; 
 
    border-top: 4px solid #004B7A; 
 
    } 
 
    #slideshow .pics 
 
    { 
 
    background-color: #EEEEEE; 
 
     padding: 0; margin: 0; 
 
     overflow: hidden; 
 
     height: 335 px; 
 
    } 
 
#slideshow .pics img 
 
              { 
 
               width: auto!important; 
 
               height: auto!important; 
 
              } 
 
    #slideshow .navigation 
 
    { 
 
    background-color: #004B7A; 
 
    float: left; 
 
    width: 100%; 
 
    margin-bottom: 16px; 
 
    } 
 
    #slideshow .navigation a 
 
    { 
 
    font-weight: bold; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    margin: 8px 8px; 
 
    background-repeat: no-repeat; 
 
    text-decoration: none; 
 
    } 
 
    #slideshow .navigation a.next 
 
    { 
 
    background-image: url 
 

 
(/global/gad/gad00045.nsf/arrow_white_right.gif); 
 
    background-position: right center; 
 
    padding-right: 24px; 
 
    } 
 
    #slideshow .navigation a.prev 
 
    { 
 
    background-image: url 
 

 
(/global/gad/gad00045.nsf/arrow_white_left.gif); 
 
    background-position: left center;           
 
    padding-left: 24px; 
 
    } 
 
    #slideshow .thumbnails 
 
    { 
 
    float: left; 
 
    width: 100%; 
 
    display: block; 
 
    text-align: center; 
 
    } 
 
    #slideshow .thumbnails li 
 
    { 
 
margin:0; padding: 0 0 16px 16px; 
 
    float: left; 
 
    display: inline; 
 
    } 
 
    #slideshow .thumbnails li a 
 
    { 
 
    float: left; 
 
    width: 68px; 
 
    height: 52px; 
 
    overflow: hidden; 
 
    background-color: #fff; 
 
    border: 1px solid #eee; 
 
    } 
 
    #slideshow .thumbnails li.selected a 
 
    { 
 
    border: 1px solid #004B7A; 
 
    } 
 
    #slideshow .thumbnails li img 
 
    { 
 
    filter: alpha(opacity=50); 
 
     opacity: 0.5; 
 
     -moz-opacity: 0.5; 
 
    height: 52px; 
 
    } 
 
    #slideshow .thumbnails li.selected img, 
 
    #slideshow .thumbnails li a:hover img 
 
    { 
 
    filter:alpha(opacity=100); 
 
     opacity: 1; 
 
     -moz-opacity: 1; 
 
    } 
 
#slideshow .text 
 
{ 
 
margin: 16px 16px 16px 16px; 
 
float: left; 
 
display: inline; 
 
} 
 
#slideshow .text p 
 
{ 
 
padding: 0; 
 
margin: 0; 
 
} 
 
</style> 
 
<div id="loadingmsg"> 
 
<p>Loading...</p> 
 
</div> 
 
<div id="slideshow" style="display:none"> 
 
<div class="pics"> 
 
<img class="next" src="/global/seitp/seitp202.nsf/0/3a21330477f5bebac125811700356f63/$file/1.jpg"> 
 
<img class="next" src="/global/seitp/seitp202.nsf/0/cdabc73c5b327029c1258117003894f0/$file/2.jpg"> 
 
<img class="next" src="/global/seitp/seitp202.nsf/0/f2694bce9039ee58c12581170038b6be/$file/3.jpg"> 
 
<img class="next" src="/global/seitp/seitp202.nsf/0/db1854683ea4fd97c12581170038f5b1/$file/4.jpg"> 
 
<img class="next" src="/global/seitp/seitp202.nsf/0/ae4fd2f02f2223e2c125811700391688/$file/5.jpg"> 
 

 
</div> 
 
<div class="navigation"> 
 
    <a class="prev">Prev</a> 
 
    <a class="next">Next</a> 
 
</div> 
 
<div class="thumbnails"></div> 
 
</div> 
 
<script type="text/javascript"> 
 
$(window).load(function() { 
 
    $('#loadingmsg').hide(); 
 
    $('#slideshow').show(); 
 
    $('#slideshow .pics').cycle({ 
 
     fx: 'fade', 
 
     timeout: 0, 
 
     prev: '#slideshow .navigation .prev', 
 
     next: '#slideshow .next', 
 
     pager: '#slideshow .thumbnails', 
 
     pagerAnchorBuilder: function(idx, slide) { 
 
      return '<li><a href="#"><img src="' + slide.src + '" /></a></li>'; 
 
     }, 
 
     before: function(currSlideElement, nextSlideElement, options, 
 

 
forwardFlag) { 
 
      var el = $(this); 
 
      var index = el.parent().find('img').index(el); 
 
      $('#slideshow .text p').hide(); 
 
      $('#slideshow .text p:eq(' + index + ')').show(); 
 
      $('#slideshow .thumbnails li').removeClass('selected'); 
 
      $('#slideshow .thumbnails li:eq(' + index + ')').addClass 
 

 
('selected'); 
 
     } 
 
    }); 
 
    $('#slideshow .navigation a:first').css('float', 'left'); 
 
    $('#slideshow .navigation a:last').css('float', 'right'); 
 
}); 
 
</script>

我曾尝试加入的身材和figcaption,但没有奏效。不应该修改代码太多。如果你有任何想法,请分享,帮助将不胜感激:)

回答

0

因为你不能添加标题虽然尝试figcaption, 一种方法是在图像上方或下方创建一个小段作为标题。 由于您可以控制幻灯片,所以也要更新段落。 问题解决了。