2

我在这里有一个无限轮播功能应用于一系列图像：http: //nokkam.com/showcase.html 我有一个要求让字幕看起来“不妨碍图像”……呃。由于脚本创建的 textholder div 基于图像的高度，因此我尝试更改其位置的方法失败了（我假设它基于高度数学而失败，不确定）。我在 firebug 中找到了 textholder 并试图给它一个“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 -->

4

1 回答 1

1 
#carousel {
  padding-bottom: 62px;
}

那应该这样做......我认为

于 2011-08-17T17:02:17.937 回答