jquery - 无限轮播字幕修改

我在此处将无限轮播功能应用于一系列图像：http://nokkam.com/showcase.html
我曾要求将字幕显示为“不妨碍图像显示”……呃。由于脚本创建的textholder div是基于图像的高度的，所以我尝试更改其位置的方法失败了（我假设基于高度数学无法确定其失败）。我将文本持有人放在了萤火虫中，并试图给它一个“ bottom：-80px”值，但无济于事。它似乎只是在其他元素后面消失了。它似乎仍然存在，只是不可见。然后，我以为我可能是阻止它可见的“幻灯片容器”元素，因此我相当大地调整了它的高度以发现它仍然不可见。我的问题是：是否可以以某种方式修改脚本或其变量的某些方面，以在实际的幻灯片显示下生成文本保持器？一如既往地提供任何帮助，我们将不胜感激。

脚本的相关部分

   (function($){
    $.fn.extend({
        infiniteCarousel: function(options)
        {
            var defaults =
            {
                transitionSpeed : 1000,
                displayTime : 6000,
                textholderHeight : .15,
                displayProgressBar : 1,
                displayThumbnails: 0,
                displayThumbnailNumbers: 0,
                displayThumbnailBackground: 0,
                thumbnailWidth: '20px',
                thumbnailHeight: '20px',
                thumbnailFontSize: '.65em'
            };

// Build textholder div thats as wide as the carousel and 20%-25% of the height
$(obj).append('<div id="textholder'+randID+'" class="textholder" style="position:absolute;bottom:0;margin-bottom:'+-imgHeight*o.textholderHeight+'px;left:'+$(obj).css('paddingLeft')+'"></div>');
var correctTHWidth = parseInt($('#textholder'+randID).css('paddingTop'));
var correctTHHeight = parseInt($('#textholder'+randID).css('paddingRight'));
$('#textholder'+randID).width(imgWidth-(correctTHWidth*2)).height((imgHeight*o.textholderHeight)-(correctTHHeight * 2)).css({'backgroundColor':'#ccc','opacity':'0.9'});                showtext($('li:eq(1) p', obj).html());

的HTML

<div id="slidecontainer">
<div id="carousel">
<ul>
  <li><img alt="midrar sports logo design, custom bag and banner" src="/assets/images/1.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Midrar Sports Management LLC, Jordan <br/>
    <span>Category:</span> Brand Consultancy<br/>
    <span>Description:</span> Branding Strategy and Collateral Printed Materials</p>
  </li>
  <li><img alt="Nissan North America large format poster on white wall" src="/assets/images/2.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Nissan North America <br/>
    <span>Category:</span> Design and Large Format Printing<br/>
    <span>Description:</span>  Nissan Poster Design and Large Format Printing</p>
    </li>
    <li><img alt="Natural Pick Tea packaging design cinnamon and green tea varieties" src="/assets/images/3.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Natrual Pick Brand | Sri Lanka and USA <br/>
    <span>Category:</span> Brand Consultancy, Package Design<br/>
    <span>Description:</span> Naming, Design Strategy for the Development of Brand Identity and Packaging Design for 13 Varieties of Tea</p>
    </li>
    <li><img alt="" src="/assets/images/4.jpg" width="824" height="410" />
    <p>
    <span>CLIENT:</span> Plateau Systems<br/>
    <span>Category:</span> Conferences and Trade Shows<br/>
    <span>Description:</span> Conference at San Francisco | Designed entire look/feel/tone/collateral materials + Printing &amp; Execution of entire package including Large format posters, Name Tags, Backdrops and Conference Guide</p>
    </li>
    </ul>
</div> <!-- END CAROUSEL -->

最佳答案

#carousel {
  padding-bottom: 62px;
}

那应该做的...我认为

关于jquery - 无限轮播字幕修改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7096352/