Question

我正在使用Bootstrap Jumbotron并尝试创建一个自动循环浏览img文件夹中不同图像的jQuery函数;目前只有三个滑块#jpg img，预期的行为是2秒后，css中的img被slider2.jpg替换，直到它返回到slider1.jpg。问题是这种情况没有发生，图像也没有从slider1变为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")');

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

1 个答案: