JavaScript dymanically изменить стиль фона CSS

Question

Я пытаюсь динамически менять фоновое изображение, непрерывно перебирая массив путей изображения. Код работает, если я записываю вывод в консоль, но я не могу заставить изображение фактически измениться.

Оригинальный CSS: (я переопределение стиль по умолчанию из другого файла CSS)

<style> 
     .jumbotron { 
     background: #7da7d8 url('images/rotunda2.jpg') no-repeat center center !important; 
     } 
</style> 

JavaScript:

$(document).ready(function() { 

var count = -1; 
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 
setInterval(swap, 5000); 

function swap(){ 
    $('.jumbotron').css("background", "#7da7d8 url('"+images[++count % images.length]+"') no-repeat center center !important"); 
    console.log(images[++count % images.length]); 
} 

}); 

Есть идеи?

Answer 1

Я не думаю, изменение css - хорошая идея, вы можете определить некоторые классы и динамически изменить классы на элементе!

HTML:

<div class="dynamicBg class1"></div> 
<div class="dynamicBg class1"></div> 

CSS:

.dynamicBg { 
    background-color: #7da7d8; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.class1 { 
    background-image: url('images/image1.jpg'); 
} 
.class2 { 
    background-image: url('images/rotunda2.jpg'); 
} 
.class3 { 
    background-image: url('images/rotunda3.jpg'); 
} 
.class4 { 
    background-image: url('images/rotunda4.jpg'); 
} 

JS:

$(function() { 
    var classStr = 'class1 class2 class3 class4', 
     classArr = classStr.split(' '), i = 0, 
     $dynamicBg = $('.dynamicBg'); 
    setInterval(function() { 
     i = i > 3 ? 0 : i + 1; 
     $dynamicBg.removeClass(classStr).addClass(classArr[i]); 
    }, 5000); 
}); 

Answer 2

Дождитесь загружаемого документа:

$(document).load(function() 
{ 
    var count = -1; 
    var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 
    setInterval(swap, 5000); 

    function swap(){ 
     $('.jumbotron').css("background", "#7da7d8 url("+images[++count % images.length]+") no-repeat center center !important"); 
     console.log(images[++count % images.length]); 
    } 
}); 

Answer 3

Ты функция подкачки кажется отчасти странным. Как правило, для чего-то подобного, вы можете иметь счетчик, который получает приращение, а затем просто сбрасывается до 0 и начинается. Также убедитесь, что вы работаете в контексте обработчика события onload.

var count = 0; 
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 

function swap(){ 
    //get the next image 
    var nextImage = images[count]; 
    console.log(nextImage); 

    $('.jumbotron').css("background-image", nextImage); 

    //increment count 
    count = count > images.length - 1 ? 0 : count+=1; 
} 

$(document).ready(function(){ 
    setInterval(swap, 5000); 
}); 

в стороне от этого, не забудьте проверить вашу консоль ошибок для ошибок, и для 404, отражающих вы можете иметь плохие пути изображения

Answer 4

Попробуйте это:

$(document).load(function() { 
    var count = -1; 
    var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg']; 
    setInterval(swap, 5000); 

    function swap() { 
     var img = images[++count % images.length]; 

     $('.jumbotron').css('background', '#7da7d8 url(' + img + ') no-repeat center center !important'); 
     console.log(img); 
    } 
});