Jquery 易滑1.7受Javascript影响的CSS
我正试图通过使用EasySlider 1.7的滑块获得一个很好的叠加效果。这不仅应该包括图像,还应该包括表示图像的文本。现在我很难在需要的页面上对齐文本 这是主页,在主滚动图像上看到黑色覆盖的部分是文本应该位于的位置。现在,如果我去掉了滚动文本的代码,文本将位于它应该位于的位置。然而,当我添加脚本以同时滚动文本时,它似乎会使文本消失 这是我的代码。Jquery 易滑1.7受Javascript影响的CSS,jquery,html,css,easyslider,Jquery,Html,Css,Easyslider,我正试图通过使用EasySlider 1.7的滑块获得一个很好的叠加效果。这不仅应该包括图像,还应该包括表示图像的文本。现在我很难在需要的页面上对齐文本 这是主页,在主滚动图像上看到黑色覆盖的部分是文本应该位于的位置。现在,如果我去掉了滚动文本的代码,文本将位于它应该位于的位置。然而,当我添加脚本以同时滚动文本时,它似乎会使文本消失 这是我的代码。 HTML: <div class="filler"> <div class="filler-picture">
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>
.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;
}
<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>
EasySlider Javascript:
<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>
.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;
}
<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>
$(文档).ready(函数(){
$(“.filler text”).easySlider({
是的,
是的,
速度:1800,
暂停:5000,
nextId:“next2”,
prevId:“prev2”
});
$(“.filler img”).easySlider({
是的,
是的,
速度:1800,
暂停:5000,
nextId:“next2”,
prevId:“prev2”
});
});
注意:我已尝试将文本的脚本放在图像的脚本下,这不会改变其外观。希望有人能帮上忙。向填充文本添加滑块效果将jquery设置其属性 这是由于您的li在填充文字中没有考虑其高度。因此,第一种解决方案是通过添加clearfix-in-advance模式或simple使li达到其高度:
<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>
WaterTiger
watertiger项目是一个测试项目,而我们把所有的网站都集中在一起,如果你必须的话可以称之为填充,没有watertiger项目是你唯一的梦想。
所以它看起来像:
<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>
WaterTiger
watertiger项目是一个测试项目,而我们把所有的网站都集中在一起,如果你必须的话可以称之为填充,没有watertiger项目是你唯一的梦想。
并最终管理填充文本的顶部位置即使使用此clearfix,它似乎仍然没有任何效果。您可以在我的示例文档中检查最终输出:它是ur文档的副本。只需添加上述clearfix并使用:。填充文本{bottom:10px;}管理顶部位置即可,这样该位就可以工作了,但现在当图片滑动时,它会溢出。也许这是一个大小问题,但是当它返回到起始图像时,它会再次重置吗?