jquery - 更改横幅中的背景

Question

This是我正在处理的代码。

HTML

<section id="banner">
    <img src="http://3.bp.blogspot.com/-XKyf-av-Cq4/T8iF9hnSOII/AAAAAAAATUg/zeO5BrKvSes/s1600/tiaras+princesas,novias+(3).png" alt="" style="max-width:200px;height:auto" />
    <br>
    <h2>Etiam adipiscing</h2>
    <p>Magna feugiat lorem dolor egestas</p>
    <ul class="actions">
        <li><a href="#" class="button big special">Learn More</a></li>
    </ul>
</section>

CSS

#banner {
    padding: 8em 0 6em 0;
    background-color: #662800;
    color: rgba(255, 255, 255, 0.75);
    background-attachment: fixed;
    background-image: url("../images/banner.jpg");
    background-size: cover;
    text-align: center;
}

#banner input, #banner select, #banner textarea {
    color: #fff;
}

#banner a {
    color: #FF6600;
}

使 slider 的背景(图像)每 2-3 秒无需任何操作即可更改的最简单方法是什么？我做了我的研究，试图包括 this进行了一些修改，但它不起作用。我不太确定如何以正确的方式修改现有的 CSS，以及我的 HTML 最终应该是什么样子。

知道如何让它发挥作用吗？有没有更简单的方法？

Answer 1

如果你只想改变背景，没有任何交互，here's an adaptation of the other fiddle you were trying to get working.

var images = [ "http://domain.com/imageoneurl.jpg", "http://domain.com/imagetwourl.jpg"];

在上面的数组中包含您要循环浏览的所有图像，用逗号分隔，用引号引起来。

下面我们为横幅元素设置一个变量，以及以毫秒为单位的间隔时间。

var bannerBackground = document.getElementById( 'banner' );
var interval = 2500; //in milliseconds

下面是真正的魔法正在发生。我们弹出最后一张图片并将 background-image 属性设置为数组中的第一张图片，并每 2500 毫秒重复一次。您可以通过更改 var interval = 声明中的数字来调整该计时器。

setInterval( function(){
  images.unshift( images.pop() );
  bannerBackground.style.backgroundImage = "url(" + "'" + images[0] + "'" + ")";
 }, interval );

无需对您的 HTML 本身进行任何修改，但您确实需要以某种方式包含此 JavaScript。要么将其全部粘贴到一个 .js 文件中并以这种方式将其包含在文档底部，要么将其粘贴到文档本身中，如下所示:

<script type="text/javascript">
// self executing function
(function() {
   // paste all your JavaScript code here.

})();

</script>

将其粘贴在底部，就在结束 </body> 标记的上方。