Question

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

这是滑块的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处理？

我不知道。有人吗？

谢谢！

Answer 1

.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/

JQuery Cycle滑块中的图像标题

1 个答案: