0

jQueryの「Cycle」プラグイン（http://jquery.malsup.com/cycle/）を使用して、s内にある証言をローテーションしようとしています<span>...しかし、プラグインが原因でコンテンツが中央に配置されていません。<span>昨日の朝、ここの誰かが要素がプラグインによって絶対的に配置されていることを指摘しました：$slides.css({position: 'absolute', top:0, left:0}).hide()

私はJSを知らず、まだHTML / CSSに取り組んでいるので、ここの誰かがこれの修正を知っていて、私を助けてくれることを望んでいました。うまくいかない場合：/

追加left:50%してみましたが、中央にありますが、スライドが壊れて、すべて<span>が一度に表示されます。

[編集]

HTMLとCSSは次のとおりです。

<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />

.slideshow {
width:940px;
height:64px;
text-align:center;
background-image:url(../images/quotes.png);
}

単独で、すべてが計画どおりに機能します。次に、jQuery/Cycleプラグインを追加します。

// set position and zIndex on all the slides
    $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
        var z;
        if (opts.backwards)
            z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
        else
            z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
        $(this).css('z-index', z)
    });

これがすべてを台無しにするものです。現状では、<span>sは一度に1つずつ表示され、想定どおりにフェードインおよびフェードアウトします。ただし、絶対位置が原因​​でテキストが中央に配置されなくなります。だから私はに変更left:0しましたleft:50%-ワラ！問題が解決されたテキストは中央に配置されますが、スパンがすべて同時に表示され、フェードイン/フェードアウトがない場合を除きます。

4

1 に答える 1

0

コードがなければ、これを呼び出すのは簡単ではありませんが、お客様の声はある種のブロック要素内にあると思います。その要素に適用position:relativeすると、絶対位置<span>にあるが含まれます。スパン自体にポジショニングスタイルを実際に適用するのではなく、プラグインに任せてください。

お役に立てば幸い

編集

さて、これを試してみてください：

.slideshow {
    width:940px;
    height:64px;
    background-image:url(../images/quotes.png);
    position:relative;
    }

.slideshow span {
    display:block;
    }

<spans>の幅と一致するように、sの幅も手動で設定する必要がある場合があります。div.slideshow

于 2010-10-02T08:25:06.933 に答える