2013-01-10 76 views
1

我使用滑塊http://marktyrrell.com/labs/blueberry/,並試圖添加覆蓋圖像和每個div更改的說明框。我添加了一個div類,但它沒有顯示出來。不知道我是否也需要改變JavaScript?說明div覆蓋圖不顯示在李圖像

CSS

.blueberry { 
    margin: 0 auto; 
    max-width:1280px; 
    position:relative; 
    z-index:1; 
    margin-top:-25px; 

} 

.blueberry .slides { 
    display: block; 
    position: relative; 
    overflow: hidden; 
    margin:0; 
    padding:0; 
    list-style:none; 

} 
.blueberry .slides li { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 

} 
.blueberry .slides li img { 
    display: block; 
    width: 100%; 
    max-width: none; 

} 
.blueberry .slides li.active { display: block; position: relative; } 
.blueberry .crop li img { width: auto; } 

.slides .description { 
    z-index:100; 
    position:absolute; 
    left: 0px; 
    background:#000; 
    color:#1d1d1d; 
} 

HTML

<div class="blueberry shadow"> 
    <ul class="slides"> 
    <li><img src="images/slide1.jpg" /> 
    <div class="description"> 
    <p>Kick off 2013 by starting a fundraising campaign to help people get access to clean water. It&rsquo;s fun, it&rsquo;s easy and it&rsquo;s the best way we can think to start the new year.</p></div></li> 

JS

<script> 
$(window).load(function() { 
$('.blueberry').blueberry(); 
}); 
</script> 

感謝所有幫助提前

回答

1

您需要定義CSS top屬性,看它工作正常:

enter image description here

注意:使用divpul li是agaisnt到網上standarts。我建議使用標籤,如spanems,i

+0

哦,男人......我不能相信我忘了頂!謝謝! – user1913714