Question

我需要在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>

Answer 1

如果要在不使用滑块插件的情况下执行此操作，则意味着必须编写自己的插件。这是一个使用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>

Answer 2

您可以尝试

<div class="bg-img" id="mybg-div">

和javascript

$(function() {
  var div = $('#mybg-div');
  var backgrounds = ['url(image-one)', 'url(image-two)'];
  var current = 0;

function nextBackground() {
 div.css(
   'background',
    backgrounds[current = ++current % backgrounds.length]
 );

setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
  div.css('background', backgrounds[0]);
});

工作 JSFIDDLE

Answer 3

您也可以通过关键帧动画来实现：

喜欢

@-webkit-keyframes changeBg
        {
            0%   {background-image: url("images/img1.jpg");}
            25%   {background-image: url("images/img2.jpg");}
            50%   {background-image: url("images/img3.jpg");}
            100%   {background-image: url("images/img4.jpg");}
        }

Answer 4

这就像一个插件：

$(document).ready(function(){

  const imgOne = 'https://preview.ibb.co/b43uR8/img01.jpg';
  const imgTwo = 'https://preview.ibb.co/ioNAzT/img02.jpg';
  const imgThree = 'https://preview.ibb.co/c9xtKT/img03.jpg';

  const imgArray = [imgOne, imgTwo, imgThree];
  
  $('.bg-img').css('background-image', 'url(' + imgArray[0] + ')');
  
  let interval = 0;
  
  setInterval(function(){
    
    if (interval < (imgArray.length - 1)) {
    	interval++;
    } else {
    	interval = 0;
    }
    
    $('.bg-img').css('background-image', 'url(' + imgArray[interval] + ')');
  
  }, 4000);
  
});

.bg-img {
  width: 100%;
  height: 100vh;
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg-img"></div>

如何反复更改背景图像

4 个答案: