2

小さなプロジェクト用の簡単なスライドショーを非常に高速に作成しましたが、画像をインラインに保つことができません。これが私のコードとフィドルです：HTML

<div id="slides">
    <div class="slides_container">
        <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="960" height="392" alt="Slide 1" class="slide"  id="firstSlide">
        <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="960" height="392" alt="Slide 2" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="960" height="392" alt="Slide 3" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="960" height="392" alt="Slide 4" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="960" height="392" alt="Slide 5" class="slide" style="display:none;">
        <img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="960" height="392" alt="Slide 6" class="slide" style="display:none;">
    </div>
</div>​

CSS：

.slide{
    width:960px;
    height:392px;
    display:inline;
    float:left;
}​

JS：

function slideShow() {
    var displayToggled = false;
    var current1 = $('.slide:visible');
    var nextSlide = current1.next('.slide');
    var hideoptions = {
        "direction": "left",
        "mode": "hide"
    };
    var showoptions = {
        "direction": "right",
        "mode": "show"
    };
    if (current1.is(':last-child')) {
        current1.effect("slide", hideoptions, 1000);
        $("#firstSlide").effect("slide", showoptions, 1000);
    }
    else {
        current1.effect("slide", hideoptions, 1000);
        nextSlide.effect("slide", showoptions, 1000);
    }
};
setInterval(slideShow, 3000);
slideShow();​

フィドル： http： //jsfiddle.net/xYWzU/6/

お気づきのとおり、機能しますが、次の画像がスライドすると、現在の画像の下にスライドし、その後正しい位置にポップアップ表示されます。何が間違っているのかわからない。どんな助けでも素晴らしいでしょう。

4

2 に答える 2

5

これがあなたが望むものであるかどうかはわかりませんが、追加します：

position: absolute;

あなたの問題を解決します。

これがJSFiddleです。

于 2012-12-14T01:03:48.270 に答える
1

今後の参考のために（または今すぐスライドショーを変更したい場合）、スライドショーの作成に最適な「 Cycle 」と呼ばれる優れたjQueryプラグインがあります。

設定は簡単で、CSSをそれほど行う必要はありません;）

于 2013-06-27T01:43:35.617 に答える