Javascript:如何在页面加载时随机化图像

时间:2017-04-04 02:01:47

标签: javascript jquery css css3

我正在创建一个单页网站,我希望每次加载页面时都添加一个随机图像。在我使用PHP随机化我的轮播之前,使用 ORDER BY rand() ,而选择数据。现在我正在寻找一个随机图像的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>

1 个答案:

答案 0 :(得分:0)

好的,我得到了一些网站的答案。我的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>