小提琴在这里:http://jsfiddle.net/r4qyU/
这是一个带有图块效果的JQuery Cycle2幻灯片。我无法弄清楚如何将标题放在图像上方。幻灯片显示插件应用了overflow: hidden
样式。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.com/min/jquery.cycle2.min.js"></script>
<script src="https://rawgithub.com/malsup/cycle2/master/jquery.cycle2.tile.js"></script>
<div class="my-wrapper">
<div class="cycle-slideshow" data-cycle-fx="tileSlide" data-cycle-timeout=2000 data-cycle-caption-template="{{cycleTitle}}">
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-cycle-title="Spring">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-cycle-title="Redwoods">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-cycle-title="Angle Island">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg" data-cycle-title="Raquette Lake">
<div class="cycle-caption"></div>
</div>
</div>
和css:
.my-wrapper {
width: 700px;
height: 500px;
background: gray;
padding: 10px;
margin: auto;
}
.cycle-slideshow {
width: 100%;
margin-top: 100px;
}
.cycle-caption {
background: rgba(0,0,0,.5);
font-size: 70px;
right: auto;
height: 80px;
line-height: 80px;
width: 100%;
top: -40px;
}
答案 0 :(得分:2)
你做得很好,一切都差不多了!
我通过以下方式修改了你现有的css:
.cycle-slideshow {
width: 100%;
margin-top: 100px;
overflow: visible !important;
}
这很重要。如果我没有这样做,由于overflow: hidden
,文本会被切断,因为我提供了一些关键信息我添加了
overflow: visible !important; This effectively overrides any other style rule.
然后我使用position
absolute
来获取图片上方的.cycle-caption
,如下所示:
.cycle-caption {
background: rgba(0,0,0,.5);
font-size: 70px;
height: 80px;
line-height: 80px;
width: 100%;
position: absolute; /* What I added */
top: -80px; /* This needs to be set to the height of the .cycle-caption */
left: 0; /* What I added */
}
以下是为您更新的jsFiddle,看看这是否是您想要的。
在我的解决方案之后,我们遇到了一个问题,动画将显示在容器外部,显然这不是我们想要的。我解决这个问题的方法就是将高度设置为.cycle-slideshow
185px
这里是一个更新的jsFiddle