Изменение фоновых изображений с помощью JQuery

Question

У меня есть «.jumbotron», в котором мне нужно менять фоновые изображения только с помощью таймера. Я пытался управлять этим с помощью JQuery, но скрипт не работает. Вот он:

var imgHead = [ 
    'cover.jpg', 
    'cover1.jpg', 
    'cover2.jpg' 
]; 
function Jumbotron(){ 
    if(i > (imgHead.length - 1)){ 
     $('.jumbotron').animate({'opacity': '0'}, 200, function(){ 
      i = 1; 
      $('.jumbotron').css('background-image', 'url("+imgHead[0]+")'); 
     }); 
     $('.jumbotron').animate({'opacity': '1'}, 200); 
    } else { 
     $('.jumbotron').animate({'opacity': '0'}, 200, function(){ 
      $('.jumbotron').css('background-image', 'url("+imgHead[i]+")'); 
      i++; 
     }); 
     $('.jumbotron').animate({'opacity': '1'}, 200); 
    }; 
}; 
var intervalJumbotron = setInterval(Jumbotron, 3000); 

Answer 1

Проблема, как я уже говорил в комментариях является конкатенация при присвоении значения фонового изображения.

var imgHead = [ 
 
    '//placehold.it/64X64/ff0000', 
 
    '//placehold.it/64X64/00ff00', 
 
    '//placehold.it/64X64/0000ff' 
 
]; 
 
var i = 0; 
 

 
function Jumbotron() { 
 
    if (i >= imgHead.length) { 
 
    i = 0; 
 
    } 
 
    $('.jumbotron').animate({ 
 
    'opacity': '0' 
 
    }, 200, function() { 
 
    $(this).css('background-image', 'url("' + imgHead[i++] + '")').animate({ 
 
     'opacity': '1' 
 
    }, 200); 
 
    }); 
 

 
}; 
 
var intervalJumbotron = setInterval(Jumbotron, 3000); 
 

 
Jumbotron();

.jumbotron { 
 
    height: 64px; 
 
    background-repeat: no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="jumbotron"></div>