0

軽量のJQueryスライダーを自分のサイトに実装しようとしています。木枠が写真の端にわずかに重なっている、木枠のグラフィックの中に座っているような写真を表示できるようにしたいと思います。スライダーが機能していて、透明な.png画像フレームマスクファイルをスライダーdivの上に配置しようとしましたが、うまくいきません。洞察をお願いします。CSSの問題だと思います。

HTML：

<div id="container">
    <div class="mask"></div>
    <div id="slider">
        <div>
            <img src="images/1.jpg" alt="image01">
        </div>
        <div>
            <img src="images/2.jpg" alt="image02">
        </div>
        <div>
            <img src="images/3.jpg" alt="image03">
        </div>
    </div>
</div>

CSS：

#container {
    position: relative;
    width: 700px;
    height: 325px;
}

.mask {
    background: url('images/mask.png') no-repeat 0 0;
    width: 700px;
    height: 325px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
}

#slider {
    position: relative;
    width: 700px;
    height: 325px;
}

#slider > div {
    position: absolute;
    top: 0;
    left: 0;
}

JQuery：

$(function() {
    $("#slider > div:gt(0)").hide();

    setInterval(function() {
        $('#slider > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slider');
    }, 4000);
});

ご協力いただきありがとうございます！

jsFiddle： http: //jsfiddle.net/qpL3B/

4

1 に答える 1

0

jqueryslideのようなプラグインを使用することをお勧めします。

http://jquery.malsup.com/cycle/

次に例を示します。

http://jsfiddle.net/lucuma/NFnCC/

コードは非常に単純です。

$('#slideshow').cycle({fx:'fade'})


<div id="sliders">
    <img src="http://s15.postimage.org/wg26u64jf/mask.png" />
  <div id="slideshow">
    <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
    <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
    <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
    <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
</div>
</div>

</ p>

于 2012-06-10T02:25:06.830 に答える