2013-01-10 51 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