Question

我正在设计一个基于bootstrap的网站。我有一个导航栏，在它下面有一个全屏幕背景图像。我想在几秒钟后更改背景图像。图像位于标题标记内，并在其中间有一些文本。标题代码： -

resources :activities do
  collection do
    get :filter_students
  end
end
resources :students

标题的css： -

<header id="image">
    <div class="header-content">
        <h1>Hello</h1>
    </div>
</header>

我试过的javascript： -

header {
 position: relative;
 width: 100%;
 min-height: auto;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 background-size: cover;
 -o-background-size: cover;
 background-position: center;
 background-image: url('images/1.jpg');
 text-align: center;
 color: white;
}
.header1 {background-image: url('images/1.jpg');}
.header2 {background-image: url('images/2.jpg');}
.header3 {background-image: url('images/3.jpg');}

我尝试在间隔后更改类属性，但它没有工作。

我想改变标题的背景图像，让我们说每隔10秒钟到2.jpg再到3.jpg然后使用普通的javascript回到1.jpg。请提供一种方法，因为我无法想到改变图像的方法。如果有人能提供帮助，我将非常感激。

Answer 1

假设您的图像以数字命名，这将照顾您要查找的内容。

var counter = 1; //instantiate a counter
var maxImage = 5; //the total number of images that are available
setInterval(function() {
    document.querySelector('header').style.backgroundImage = "url('images/" + (counter + 1) + ".jpg')";
    if (counter + 1 == maxImage) {
        counter = 0; //reset to start
    } else {
        ++counter; //iterate to next image
    }
}, 10000);

如何每x秒更改一次bootstrap头图像？

1 个答案: