受EasySlider Javascript影响的CSS 1.7

Question

我试图用EasySlider 1.7来获得一个很好的覆盖效果。这不仅应该包括图像，还应该包含代表图像的文字。现在，我无法在需要的页面上排列文字。

http://intranet.streamflame.com

这是主页，在这里你看到主滚动图像上的黑色覆盖的部分是其中的文本应该坐下。现在，如果我摆脱代码滚动文本，文本坐落在它应该在的地方。但是，只要我添加脚本以同时滚动文本，它似乎会使文本消失。

这是我的代码。
HTML：

<div class="filler"> 
    <div class="filler-picture"> 
    <div class="filler-img"> 
    <ul>{% for project in rotations %} 
     <li><img src="{% thumbnail project.key_image.get_absolute_url 559x361 crop,upscale %}" width="559" height="361" alt="{{ project.title }}" /></li> 
    {% endfor %} 
</ul> 
</div> 
<div class="filler-mask"> 
<img src="{{ MEDIA_URL }}img/filler.png" alt="filler" /> 
</div> 
<div class="filler-text"> 
<ul> 
<li> 
    <span class="filler-text-left">WaterTiger</span> 
    <span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span> 
</li> 
<li> 
    <span class="filler-text-left">Dragonfly</span> 
    <span class="filler-text-right">Project Dragonfly is a test project whilst we get all the site together, call it a filler if you must, there is no project dragonfly your only dreaming.</span> 
</li> 
<li> 
    <span class="filler-text-left">Spacemunch</span> 
    <span class="filler-text-right">Project Spacemunch is a test project whilst we get all the site together, call it a filler if you must, there is no project Spacemunch your only dreaming.</span> 
</li> 
</ul> 

CSS：

.filler { 

    position: relative; 
     margin-left:20px; 
     height:361px; 
     width:559px; 
     float:left; 

} 

.filler-mask { 
    position: absolute; 
    left:0; top:0; 
    height:361px; 
    width:559px; 
    z-index: 100; 
} 

.filler-img{ 
    position: absolute; 
    left:0; top:0; 
    height:361px; 
    width:559px; 
    z-index: 50; 

} 

.filler-text { 

     width: 558px; 
     height: 68px; 
     position: absolute; 
     z-index: 200; 
     color: #fff; 

} 

.filler-text li { 

     list-style-type: none; 
     z-index: 1000; 

} 

.filler-text-left { 

     width: 169px; 
     float: left; 
     height: 48px; 
     padding: 10px; 
     font-size: 18pt; 
     font-weight: 100; 

} 
.filler-text-right { 

      width: 340px; 
     float: right; 
     height: 48px; 
     padding: 10px; 
     font-size: 10pt; 
} 

EasySlider的Javascript：

<script type="text/javascript"> 
     $(document).ready(function(){ 
     $(".filler-text").easySlider({ 
     auto: true, 
     continuous: true, 
     speed: 1800, 
     pause: 5000, 
     nextId: "next2", 
     prevId: "prev2" 
     }); 
     $(".filler-img").easySlider({ 
     auto: true, 
     continuous: true, 
     speed: 1800, 
     pause: 5000, 
     nextId: "next2", 
     prevId: "prev2" 
     }); 

     }); 
</script> 

注意：我已经尝试将脚本放在脚本下面，用于图像的脚本，但它的外观没有改变。
希望有人能帮忙。

Answer 1

添加滑块效应填料文本设置其属性的jQuery

这是你李里面的填充物文本不采取它的高度的结果。所以第一种解决方案是通过预先模式或简单添加clearfix让李利用其高度：每个

<span class="filler-text-left">WaterTiger</span> 
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span> 

所以看起来后

<div style="clear: both;"></div> 

，如：

<span class="filler-text-left">WaterTiger</span> 
<span class="filler-text-right">Project watertiger is a test project whilst we get all the site together, call it a filler if you must, there is no project watertiger your only dreaming.</span> 
<div style="clear: both;"></div> 

最后管理你的填充文本的顶部位置