0

4 つのバナー画像があり、無限ループで基本的なフェード アニメーションを使用して循環させたいと考えています。私はこのjQueryプラグインを見つけました: http://jquery.malsup.com/cycle/そして、このようにしようとしました:

HTML:

<div id="banner">
    <div id="home-banner-1"></div>
    <div id="home-banner-2"></div>
    <div id="home-banner-3"></div>
    <div id="home-banner-4"></div>
</div>

CSS:

#banner {
    margin: 0 auto 20px;
    width: 940px;
}
#home-banner-1 {
    background: url(../Images/home_banner.png) no-repeat 0 0;
    height: 271px;
}
#home-banner-2 {
    background: url(../Images/home_banner.png) no-repeat 0 -272px;
    height: 271px;
}
#home-banner-3 {
    background: url(../Images/home_banner.png) no-repeat 0 -544px;
    height: 271px;
}
#home-banner-4 {
    background: url(../Images/home_banner.png) no-repeat 0 -816px;
    height: 271px;
}

ジャバスクリプト:

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#banner').cycle('fade');
    });
</script>

最終的に起こるのは、サイクル中にそれぞれに絶対位置が設定されているため、バナーがどれも表示されないことです。ここで何が欠けていますか？これだけでうまくいくのではないですか？これを行うより良い方法はありますか？

4

5 に答える 5

1

これらのバナーのそれぞれに幅を持たせるべきだと思います。それらを絶対配置するとすぐに、親を埋めるのではなく、幅が 0px になります。また、バナーを相対位置に設定します。そう：

#banner { 
    position: relative;
    margin: 0 auto 20px; 
    width: 940px; 
} 
#home-banner-1 { 
    background: url(../Images/home_banner.png) no-repeat 0 0; 
    width: 940px;
    height: 271px; 
} 
#home-banner-2 { 
    background: url(../Images/home_banner.png) no-repeat 0 -272px; 
    width: 940px;
    height: 271px; 
} 
#home-banner-3 { 
    background: url(../Images/home_banner.png) no-repeat 0 -544px; 
    width: 940px;
    height: 271px; 
} 
#home-banner-4 { 
    background: url(../Images/home_banner.png) no-repeat 0 -816px; 
    width: 940px;
    height: 271px; 
}

これは完全に機能します。

于 2010-11-10T10:23:08.010 に答える
0

が設定されている場合position: absolute、設定されている親チェーンの最初の要素に基づいて配置position: relativeされます。多くの場合、これが<body />要素になります。position: relative親に設定してみてください<div id="banner" />。

于 2010-07-09T23:14:05.897 に答える
0

絶対位置を設定することになっていますか？このデモ ( http://jquery.malsup.com/cycle/basic.html ) を見ると、位置はすべて同じですが、z-indexes/opacities/display プロパティが異なります。

<div class="slideshow" style="position: relative; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" style="position: absolute; top: 0px; left: 0px; width: 200px; height: 200px; z-index: 5; opacity: 0; display: none; ">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" style="position: absolute; z-index: 6; top: 0px; left: 0px; display: block; width: 200px; height: 200px; opacity: 1; ">
    </div>
于 2010-07-09T23:15:01.240 に答える
0

同様の要件があり、innerFade という名前のプラグインを使用することになりました。この URL で確認できます: http://medienfreunde.com/lab/innerfade/

于 2010-07-09T23:16:28.020 に答える
-1

これまでの回答を使用してこの作業を行うことができなかったため、問題に対する私の回答は、スプライトを削除し、背景でスタイル設定された4つのdivタグを使用するのではなく、4つの個別の画像をプルする4つの個別のimgタグを使用することでした。その後、すべてが宣伝どおりに機能し始めました。

于 2010-07-13T15:03:27.650 に答える