Как сделать цикличную смену фона через JS?

Question

[Сергей Ноздрин]

Добрый день!

У меня стоит задача сделать циклическую плавную смену фона (background-image) у некоторого div. Никак не получается это сделать, поэтому я решил обратиться к помощи сообщества.

Подробные исходные данные.

1) Есть сайт silakvest.ru
2) У него есть

<div class="container-fluid first_image_normalize">CONTENT</div>

3) У этого <div> есть CSS:
.first_image_normalize {
background-image: url(../images/big_img_top1.jpg);
}

Задача.

Циклично и плавно менять фон big_img_top1.jpg --> big_img_top2.jpg --> big_img_top3.jpg и снова на big_img_top1.jpg --> ... --> loop.

Мое кривое решение.

(document).ready(function(){
var imgHead = [
'../images/big_img_top1.jpg',
'../images/big_img_top2.jpg',
'../images/big_img_top3.jpg'
], i=1;

function first_image_normalize(){

if(i > (imgHead.length-1)){
$('.first_image_normalize').animate({'opacity':'0'},200,function(){
i=1;
$('.first_image_normalize').css({'background':'url('+imgHead[i]+')'});
});
$('.first_image_normalize').animate({'opacity':'1'},200);
console.log(i);
}

else{

$('.first_image_normalize').animate({'opacity':'0'},200,function(){
i++;
$('.first_image_normalized').css({'background':'url('+imgHead[i]+')'});
});
$('.first_image_normalize').animate({'opacity':'1'},200);
console.log(i);
}

}
var interval = setInterval(first_image_normalize,4000);
});

ВОПРОС.

Этот скрипт не дает нужного решения. Как откорректировать его для получения нормального результата?

Благодарность.

Заранее выражаю огромную благодарность всем, кто откликнется на мой вопрос. Любые уточнения я могу дать в комментариях. Спасибо!

Answer 1

[Виталий Инчин ☢]

Плавная смена фона JS


И я молчу про гугл...

Comments

[Mikhail]

Ай да иди ты! Либо копипастом отвечай, либо ничего не пиши. А то загуглил, так еще по лабиринтам ответов следуй.

Answer 2

[trushka]

$(function(){
  var imgHead = [
    '../images/big_img_top1.jpg',
    '../images/big_img_top2.jpg',
    '../images/big_img_top3.jpg'
  ], el =$('.first_image_normalize'), i=0;
  $.each(imgHead, function(i,val){
    el.prepend('<img src="'+val+'" class="bg hidden" onload="$(this).removeClass(\'hidden\')">')
  });
  var bg =$('.bg', el);
  setInterval(function(){
    bg.removeClass('visible').eq(i).addClass('visible');
    i=(i+1)%imgHead.length
  },4000);

.first_image_normalize {position: relative}
.first_image_normalize .bg {position: absolute; width:100%; height: 100%; transition: .3s linear; opacity:0; visibility: hidden; /*z-index: -1*/}
.first_image_normalize .bg.visible:not(.hidden) {opacity:1; visibility: visible}