2

私は現在持っています：

<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds){
//change the image
if(!imageID){
    document.getByTagName("body").src="icwXI.jpg";
    imageID++;
}
else{if(imageID==1){
    document.getByTagName"body").src="JvuP9.jpg";
    imageID++;
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*20)); 
</script>
</head>
<body style='background: url(icwXI.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;' onload='changeimage(1)'>

目的は、ボディの背景イメージが最初に icwXI.jpg をロードし、20 秒後に JvuP9.jpg に変更し、さらに 2 秒後に icwXI.jpg に戻るようにすることです。

ただし、機能していないようです。JavaScript に関する私のスキルはかなり限られています。

ありがとうございました。

4

2 に答える 2

3

背景画像の配列を作成します - 以下では、いくつかの子猫の画像でこれを行いました。次に、配列内の次のもので背景を変更する関数を作成します。位置を追跡するために、変数を使用します (.indexOf一部の地域ではサポートが不十分ですが、新しいブラウザーでは on 配列を使用できます)。

最後に、23 秒ごとに実行される間隔を作成します。実行すると、swapBG 関数が呼び出され、すぐにタイムアウトが作成され、2 秒後に再度 swapBG 関数が呼び出されます。

// backImg for tracking which image we're showing
// dbStyle is a quick reference to the style list on the body
// backgnd is an array of potential background images
var backImg = -1,
    dbStyle = document.body.style,
    backgnd = [
        'url(http://placekitten.com/350/350)',
        'url(http://placekitten.com/349/349)'
    ]; 

// Steps forward through background images, then back to start
// when it reaches the end of the list
function swapBG() {
    dbStyle.backgroundImage = backgnd[ backImg++ ]
        ? backgnd[ backImg ]
        : backgnd[ backImg = 0 ];
}

// Call swapBG() immediately
swapBG();

// Create an interval that runs every 23 seconds
setInterval(function(){
   swapBG();
   // Create a timeout to run after 2 seconds
   setTimeout(function(){ 
       swapBG()
   }, 2000 );
}, 23000);​

デモ: http://jsfiddle.net/XsAWB/2/

于 2012-06-02T03:21:09.667 に答える
0

  1. まず、いくつかの構文エラーを修正する必要があります。私が目にする最初の 2 つは、2 つの開始{ブラケットが終了していないことと、2 番目の括弧が欠落していることdocument.getByTagNameです。

  2. 関数が初めて呼び出されたときに「スリープ/タイムアウト」せず、関数が呼び出されるとすぐに背景画像が変更されます。

  3. setTimeout()また、関数を繰り返す場合、2 番目のパラメーターは実際にはmillisecondsであり、意図したように秒ではないことに注意してください。

  4. 増加し続けるため<body>、関数は 2 回しか変更されず、not-set (実際には をチェックする必要があります) と 1 の場合しかありません。変更する必要があるため、回転させたい背景ごとにケースがあります。imageIDimageID==0

  5. document.getTagByName("body").src背景画像を変更する正しい方法ではありません。document.body.style.backgroundImageは。

于 2012-06-02T02:50:50.523 に答える