如何每x秒更改引导程序标题图像？

我正在设计一个基于bootstrap的网站。我有一个导航栏，下面有一个全屏幕背景图像。我想在几秒钟后更改背景图片。该图片位于标题标签内，并在中间有一些文字。为报头的代码： -如何每x秒更改引导程序标题图像？

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

为报头中的CSS： -

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');}

我尝试了JavaScript的： -

<script type="text/javascript"> 
function run(interval, images) { 
var int = 1; 

function func() { 
    var d = document.getElementById("image"); 
    d.className += "header"+int; 
    int++; 
    if(int === images) { int = 1; } 
} 

var swap = window.setInterval(func, interval); 
} 

run(5000, 3); 
</script>

我尝试的时间间隔后的类属性改变，但它没有工作。

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

来源

2017-01-02 Kartikey Vishwakarma

你需要jQuery。你没有尝试先找到/尝试什么？ –

@ Fred-ii-我不想使用jquery或任何其他插件。有没有办法用纯JavaScript来做到这一点。我尝试过的js更新了正文。 –

这个答案http://stackoverflow.com/a/14290726/1415724包含纯JS中的任何特殊原因，你不想使用jQuery？这是另一个http://stackoverflow.com/q/31769667/1415724 –

这将照顾你在找什么，假设你的图像是用数字命名的。

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);

来源

2017-01-02 19:49:46 Andrew

非常感谢它的工作。 –

如何每x秒更改引导程序标题图像？

回答

相关问题