-1

これは些細な質問であり、過去 2 時間検索したところ、多くの結果が得られました。私の問題は、背景画像を使用してスライドショーを作成する必要があることです。しかし、残念なことに、それらのどれも私にとって 100% 機能しませんでした。私が試していた最後のコードは、

<script type="text/javascript">
    var images=new Array('images/home.png','images/home02.png','images/home03.png');
    var nextimage=0;

    doSlideshow();

    function doSlideshow()
    {
        if(jQuery('.slideshowimage').length!=0){
            jQuery('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();jQuery(this).remove()});
    }
    else{
        slideshowFadeIn();
    }
}
function slideshowFadeIn(){
    jQuery('body').prepend(jQuery('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none;z-index:-1">').fadeIn(500,function(){setTimeout(doSlideshow,3000);}));
    if(nextimage>=images.length)
       nextimage=0;
}

スライドショーは問題ありませんが、ご覧のとおり、本文の前に画像を追加しても背景にはならず、代わりに別のスペースが必要です。設定z-index:-1してみましたが、

src=jQuery('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none;z-index:-1">').fadeIn(500,function(){setTimeout(doSlideshow,3000);});
jQuery('body').css('backgroundImage','url('+src+')';

機能してslideshowFadeIn()いますが、どれも機能しません。スーパーサイズや他のプラグインも試しましたが、私が望むものには最適ではありません.

私は何時間も試みてきましたが、今は助けが必要です。どうもありがとう！

編集: JSFiddle リンク: http://jsfiddle.net/TtFmr/

4

1 に答える 1

2

私があなたの質問を正しく理解していれば... スライドショーをテキストの後ろに置こうとしているのですか?

もしそうなら、これを試してみてくださいhttp://jsfiddle.net/TtFmr/4/

 img.slideshowimage {
     z-index: -1;
     position: absolute;
     top:0px;
     left:0px;
     display: block;
 }

スライドショーを配置する方法はたくさんありますが、「正しい」配置方法は特定の状況によって異なります。

于 2013-07-11T00:25:13.070 に答える