Question

我需要一些提示如何为现有滑块中的图像添加字幕：

<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，但没有奏效。不应该修改代码太多。如果您有任何想法请分享，帮助将不胜感激:)

Answer 1

虽然尝试使用figcaption无法添加标题，一种方法是在图像上方或下方创建一个小段落作为标题。由于您可以控制幻灯片，还可以更新段落。问题解决了。

为滑块中的图像添加标题

1 个答案: