1

だから私は自分の画像を背景として使用しようとしています.3つの間で変化するようにそれらをループにしたいのですが、以下はループが機能しているように見える私のコードですが、解決できないように見える2つの問題があります:

  • タイマーは、スライドが開始する前に開始します (画面が 7 秒間真っ暗になり、最初の画像が表示されます。タイマーがコードの間違ったセクションにあると想定していますが、数回移動したところ、同じことが行われました。どのように最初の画像でサイトをロードするようにするにはどうすればよいですか?

  • 画像が非常に小さく表示され、（自動的に）必要なように画面がいっぱいになりません。画面サイズを自動的に把握してそれに応じて塗りつぶす必要があるいくつかのコードを試しましたが、うまくいかないようです...何か提案はありますか？

<head>
    <meta http-equiv="Kess Agency" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="created by kess" content="en-us">
    <style>
    body{
        background-attachment: fixed;
        background-repeat:no-repeat;
        background-position: 300 200;

    }
    </style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//auto resize



    var imgs=new Array()
    imgs[0]="images/img1.png";
    imgs[1]="images/img2.png";
    imgs[2]="images/img3.png";
    //time between slides
    var speed=7000
    //preload images
    var processed=new Array()
    for(i=0;i<imgs.length;i++){
        processed[i]=new Image();
        processed[i].src=imgs[i];
    }
    var inc=-1;
    function slideimg(){
        if (inc<imgs.length-1)
            inc++;
        else
            inc=0;
        document.body.background=processed[inc].src;
    }
    if (document.all || document.getElementById)
    window.onload=new Function('setInterval("slideimg()",speed)');

</script>

</head>
 <body>
     <p class= "type"></p>
</body>
</html>​
4

1 に答える 1

1

あなたの問題は、ページが読み込まれるまで待ってから setInterval を実行していることだと思います。私が知る限り、 setInterval は間隔が完了するまで待機してから実行されます。あなたがそれを行うことができる1つの方法は..

function slideimg(){
    if (inc<imgs.length-1)
        inc++;
    else
        inc=0;
    document.body.background=processed[inc].src;
    setTimeout(function(){
        slideimg();
    }, speed);
}

window.onload = function () {
    slideimg();
};

このようにして、スクリプトはオンロードで実行され、ロードされると待機してから再度実行されます。setInterval を使用するのではなく、この方法で処理を行うことのもう 1 つの利点は、プロセスが再度実行される前に終了することです (setInterval は、ロードされているかどうかに関係なく、選択した「任意の」秒ごとにスクリプトを実行しようとします。

背景のサイズ設定については、css をbackground-size: cover;新しいもの (CSS3) に設定してみてください。

于 2012-12-15T02:36:22.770 に答える