0

我试图在这个 JQuery 滑块中获取图像的标题（像这样，但没有动画），但到目前为止没有太大的成功。

这是滑块的 HTML...

<div class="container-slideshow"><div class="slideshow">
    <img src="img/pic2.jpg" width="300" height="200" />
    <img src="img/pic3.jpg" width="300" height="200" />
    <img src="img/pic4.jpg" width="300" height="200" />
    <img src="img/pic5.png" width="300" height="200" />
</div></div>

...由以下方式激活：

<script type="text/javascript">
$('.slideshow').cycle({
    fx: 'scrollLeft',
    speed: 400,
    pause: 1
});

我尝试将每个图像与标题 div 一起包装在一个 div 中 - 比如

<div><img src="img/pic2.jpg" width="300" height="200" /><div class="caption">Caption</div></div>
  • 但图像会覆盖标题。Z-index 没有任何区别。这些图像也不允许 CSS 不透明度，这告诉我它们正在 JQuery 中处理？

我不知道。有人吗？

谢谢！

4

1 回答 1

0 
.slide {
    width: 300px;
    height: 200px;
}
.s1 {
    background: url(http://www.hitarth.net/wp-content/uploads/2012/11/cute-puppy-300x200.jpg);
}
.s2 {
    background: url(http://www.cesarsway.com/sites/default/files/imagecache/feature_300x200/images/LabPup.jpg);
}
.s3 {
    background: url(http://cdn.cutestpaw.com/wp-content/uploads/2012/06/s-my-puppy-has-no-eyes.jpg);
}
.caption {
    height: 25px;
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3);
    text-align: center;
    color: #fff;
}

<div class="container-slideshow">
    <div class="slideshow">
        <div class="slide s1">
            <div class="caption">Caption One</div>
        </div>
        <div class="slide s2">
            <div class="caption">Caption Two</div>
        </div>
        <div class="slide s3">
            <div class="caption">Caption Three</div>
        </div>
    </div>
</div>

http://jsfiddle.net/XuwUX/

于 2013-01-18T22:00:07.943 回答