Добрый день!
У меня стоит задача сделать циклическую плавную смену фона (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);
});
ВОПРОС.
Этот скрипт не дает нужного решения. Как откорректировать его для получения нормального результата?
Благодарность.
Заранее выражаю огромную благодарность всем, кто откликнется на мой вопрос. Любые уточнения я могу дать в комментариях. Спасибо!
