Javascript：如何在頁面加載時隨機化圖像

-5

我現在正在創建單頁網站，並且每次頁面加載時我都想添加一個隨機圖像。在我使用PHP隨機化我的傳送帶之前，使用ORDER BY rand()而選擇數據。現在我正在尋找一個JavaScript代碼來隨機化圖像不使用任何數據庫。我接受任何建議，我的代碼如下：Javascript：如何在頁面加載時隨機化圖像

<!-- start home --> 
<section id="home"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-offset-2 col-md-8"> 
       <h1 class="wow fadeIn" data-wow-offset="50" data-wow-delay="0.9s">We make paper products that are <span>awesome</span></h1> 
       <div class="element"> 
        <div class="sub-element">Hello, this is WhatWeAre</div> 
        <div class="sub-element">Paper for everyone</div> 
        <div class="sub-element">Contact us and we make your products while conserving environment </div> 
       </div> 
       <a data-scroll href="#about" class="btn btn-default wow fadeInUp" data-wow-offset="50" data-wow-delay="0.6s">GET STARTED</a> 
      </div> 
     </div> 
    </div> 
</section> 
<!-- end home --> 

<style type="text/css"> 
#home{ 
    background: url('../images/home_1.jpg') no-repeat; 
    background-size: cover; 
    padding-top: 160px; 
    padding-bottom: 100px; 
    min-height: 650px; 
} 
</style>

來源

2017-04-04 Ace

好的，我們有他同樣的問題先生。這個問題不僅對我而且對每個人都很有用。我希望這將有所幫助。 – 2017-04-10 02:55:40

好的，我得到了一些網站的答案。不對我的CSS樣式表做任何改變，甚至不使用數據庫。這裏代碼如下：

<script type="text/javascript"> 
if (document.getElementById) { 
    window.onload = swap 
}; 
function swap() { 
    var numimages=7; 

    rndimg = new Array("images/home.jpeg","images/home-bg.jpg","images/home_1.jpg"); 
    x=(Math.floor(Math.random()*numimages)); 
    randomimage=(rndimg[x]); 
    document.getElementById("home").style.backgroundImage = "url("+ randomimage +")"; 
} 
</script>

來源

2017-04-04 02:40:21 Ace

除非您嘗試支持IE4，否則您不需要'if（document.getElementById）'測試。你應該用'var'聲明所有的變量。另外，使用'rndimg.length'而不是'numimages'，可以自動調整數組的大小...... – nnnnnn

所以你不想**生成**這些圖像...你已經去了* database *：'Array（「images/home.jpeg」，「images/home-bg.jpg」，「images/home_1.jpg」）即使它在您的html文件中被硬編碼。 – Kaiido

是的，我只是有一個預定義的圖像，並獲得它使用數組。我把它放在我的自定義腳本上。 – Ace

Javascript：如何在頁面加載時隨機化圖像

回答

相關問題