javascript - Bootstrap - Jumbotron - 自动图像更改 - jQuery

Question

我正在使用 Bootstrap Jumbotron 并尝试创建一个 jQuery 函数，该函数可以自动循环浏览 img 文件夹中的不同图像；目前只有三个 slider#.jpg img，预期的行为是 2 秒后 css 中的 img 被 slider2.jpg 替换，依此类推，直到它返回到 slider1.jpg。问题是这并没有发生，图像也没有从 slider 1 变为 2 或 3。

这是我的 HTML:

    <div class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-md-6 jumbotron-text">
                    <h1>CAMD</h1>
                    <p>Soluciones integrales para el hogar</p>
                    <a href="contact.html" class="btn btn-contact" role="button">CONTACTO</a> 
                </div>
            </div>
        </div>          
    </div> 

这是 CSS:

.jumbotron {
    margin-bottom: 0px;
    background-image: url(../img/slider1.jpg);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px;
}

这是 jQuery:

$(document).ready(function() {
    var imgId = 0
    var numberOfImages = 3;
    setInterval(function() {
    $(".jumbotron").css('background-image','url('../img/slider' + 'imgId' + '.jpg')');;
    imgId = (imgId + 1) % numberOfImages;
  }, 2000);
});

Answer 1

你还没有说明你的问题或错误是什么......但是，乍一看，这一行看起来是错误的:

$(".jumbotron").setInterval(function() {

setInterval 函数不是可以在选定元素上调用的 jQuery 函数。它是 window 上的一个函数。我认为这一行应该是:

setInterval(function() {

或

window.setInterval(function() {

---

其次，这不是有效代码:

$(".jumbotron").css('background-image','url('../img/slider' + 'imgId' + '.jpg')');;

引号不正确，您试图添加文字字符串 'imgId' 而不是变量的值。你可能想要:

$(".jumbotron").css('background-image','url("../img/slider' + imgId + '.jpg")');