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 に答える