javascript - 如何反复更改背景图片

我需要在我的HTML静态页面中重复更改标题横幅背景图像。现在，它只有一个bg图片。我需要再添加2张图像，这些图像必须在4或5秒后一一改变，并通过保持内容不变来像滑块一样重复该过程。有没有不使用滑块插件的简单方法。下面是我的标头的HTML代码？感谢和问候。

<header id="home">
    <!-- Background Image -->
    <div class="bg-img" ***style="background-image: url('images/images/p1.png');"***>
        <div class="overlay"></div>
    </div>
    <!-- /Background Image -->

    <!-- Nav -->
    <nav id="nav" class="navbar nav-transparent">
        <div class="container">

            <div class="navbar-header">
                <!-- Logo -->
                <div class="navbar-brand">
                    <a href="home">
                        <img class="logo" src="images/logo-png.png" alt="logo" style="width:55%;">
                        <img class="logo-alt" src="images/logo-png.png" alt="logo">
                    </a>
                </div>
                <!-- /Logo -->

                <!-- Collapse nav button -->
                <div class="nav-collapse">
                    <span></span>
                </div>
                <!-- /Collapse nav button -->
            </div>

            <!--  Main navigation  -->
            <ul class="main-nav nav navbar-nav navbar-right">
                <li><a href="home">Home</a></li>
                <li><a href="aboutus">About us</a></li>
                <li><a href="what-we-do">What we do</a></li>
                <li><a href="gallery">Gallery</a></li>
                <li><a href="contactus">Contact us</a></li>
            </ul>
            <!-- /Main navigation -->

        </div>
    </nav>
    <!-- /Nav -->

    <!-- home wrapper -->
    <div class="home-wrapper">
        <div class="container">
            <div class="row">

                <!-- home content -->
                <div class="col-md-10 col-md-offset-1">
                    <div class="home-content">
                        <h2 class="white-text">uniforms @ competetive rates</h2>
                        <p class="white-text">We are always committed to give you best quality uniform at very competitive rates
                        </p>
                        <a href="aboutus"><button class="white-btn">Read more</button></a>
                        <a href="gallery"><button class="main-btn" style="background-color:#e29d0a">Gallery</button></a>
                    </div>
                </div>
                <!-- /home content -->

            </div>
        </div>
    </div>
    <!-- /home wrapper -->

</header>

最佳答案

如果要在不使用滑块插件的情况下执行此操作，则意味着必须编写自己的插件。这是一个使用javascript实现的非常简单的示例：

var images = new Array(
  'https://dummyimage.com/1000x400/00ff00/ffffff',
  'https://dummyimage.com/1000x400/0000ff/ffffff',
  'https://dummyimage.com/1000x400/ffff00/ffffff',
  'https://dummyimage.com/1000x400/ff0000/ffffff',
);

var slider = setInterval(function() {
  document.getElementsByClassName('bg-img')[0].setAttribute('style', 'background-image: url("'+images[0]+'")');
  images.splice(images.length, 0, images[0]);
  images.splice(0, 1);
}, 3000);

.bg-img {
  width: 100%;
  padding: 10% 0;
  background-size: cover;
  background-position: center;
  border: 1px solid;
}

<div class="bg-img" style="background-image: url('https://dummyimage.com/1000x400/ff0000/ffffff');">
  <div class="overlay"></div>
</div>