使JavaScript每5秒更換背景圖像

我正在嘗試每5秒更改一次背景圖像。我應該怎麼做呢？使JavaScript每5秒更換背景圖像

window.onload = function() { 

    function Timer() { 
    window.setInterval("changeImage()", 5000); 
    } 

    function changeImage() { 
    var BackgroundImg["./Img/Bg1.jpg", 
         "./Img/Bg2.jpg", 
         "./Img/Bg3.jpg", 
         "./Img/Bg4.jpg"]; 
    var i = Math.floor((Math.random() * 3)); 
    var bgImg = document.body.style.backgroundImage(); 
    bgImg.url = BackgroundImg[i]; 
    } 
}

來源

2016-01-09 Kyle McCarthy

見http://stackoverflow.com/questions/34669608/javascript-foreach-loop-through-an-array-of-hex -values-using-settimeout-to-loop – guest271314

@凱爾麥卡錫：我建議改爲獲得隨機值。創建一個總圖像長度的數組。洗牌。並從索引0開始，如果你到達最終索引。然後再洗牌並繼續。 dueto這可以避免相同的圖像Repetition – Arunkumar

當你添加斷點並逐步完成代碼時，你會看到什麼？（ –

您正在訪問的風格不正確

window.onload = function() { 

    function changeImage() { 
     var BackgroundImg["./Img/Bg1.jpg", 
      "./Img/Bg2.jpg", 
      "./Img/Bg3.jpg", 
      "./Img/Bg4.jpg" 
     ]; 
     var i = Math.floor((Math.random() * 4)); 
     document.body.style.backgroundImage = 'url("' + BackgroundImg[i] + '")'; 
    } 
    window.setInterval(changeImage, 5000); 
}

另外，如果可能的話（通常是）一個字符串不傳遞到window.setInterval - 使用如上

來源

2016-01-09 05:47:45

打我吧;） – sfletche

我編輯 - 錯過'「'裏面的url（） –

也不會調用函數'定時器（）' – manta

這裏是你的問題的解決方案。希望能幫助到你！

<!DOCTYPE html> 

<html> 
<head> 
    <title>change picture</title> 
    <script type = "text/javascript"> 
     function displayNextImage() { 
      x = (x === images.length - 1) ? 0 : x + 1; 
      document.getElementById("img").src = images[x]; 
     } 
     function changeImage() { 
      setInterval(displayNextImage, 5000); 
     } 

     var images = [], x = -1; 
     images[0] = "http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg"; 
     images[1] = "http://www.planwallpaper.com/static/images/background-gmail-google-images_FG2XwaO.jpg"; 
     images[2] = "http://www.planwallpaper.com/static/images/beautiful-sunset-images-196063.jpg"; 
    </script> 
    </head> 
    <body onload = "changeImage()"> 
    <img id="img" src="http://www.planwallpaper.com/static/images/beautiful-sunset-images-196063.jpg"/> 
    </body> 
    </html>

來源

2016-01-09 05:52:45 HenryDev

您可以替換我用於圖片的網址。 – HenryDev

可以使一些變化

一禁止從肯定你在哪裏調用定時器功能（更好，如果有駝峯）

function Timer() { 
    window.setInterval("changeImage()", 5000); 
    }

相反，你可以直接使用

setInterval(changeImage, 5000);

changeImage是一個回調

2.Could搞不懂這是什麼意思線

var bgImg = document.body.style.backgroundImage();

不確定是否可以附加功能的場所。

反正這下面片斷可能是有用的

window.onload = function() { 
    // Array of Images 
     var backgroundImg=["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA", 
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBinSpWOvAtkxjmkf709O3rjH2ObRbWAEn9s0JcWaeL6LMtCbOrQ", 
         "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKY4J2qIFqkuDnABMzeypywbMSZL1cleS8vpySz0KD02wOYORU1g", 
         "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQkdQT0zN0xDVP-VuvwojSbS5dOstX14eZvJCOWNPxKJ5dWTIc" 
         ] 

     setInterval(changeImage, 5000); 
     function changeImage() { 
     var i = Math.floor((Math.random() * 3)); 

     document.body.style.backgroundImage = "url('"+backgroundImg[i]+"')"; 

     } 
    }

DEMO

來源

2016-01-09 06:21:42 brk

使JavaScript每5秒更換背景圖像

回答

相關問題