Плавная смена background-image

1338

16 января 2017, 21:26

Как сделать плавную смену картинок фона?
Есть вот такой скрипт, но там смена происходит не плавно

var imgHead = [
  'img/header_bg1.jpg',
  'img/header_bg2.jpg',
  'img/header_bg3.jpg',
], i=1;
function csaHead(){
  if(i > (imgHead.length-1)){
    $('.content').animate({'opacity':'0'},200,function(){
      i=1;
      $('.content').css({'background':'url('+imgHead[0]+')'});
    });
    $('.content').animate({'opacity':'1'},200);
  }else{
    $('.content').animate({'opacity':'0'},200,function(){
      $('.content').css({'background':'url('+imgHead[i]+')'});
      i++;
    });
    $('.content').animate({'opacity':'1'},200);
  }
}
var intervalCsaHead = setInterval(csaHead,8000);

Answer 1

Использование Juqery:

var editBg = function(content__bg) { 
  var contents__bg = $('.content').find('.content__bg'); 
  contents__bg.animate({opacity: 'hide'}, 500); 
  setTimeout(function() { 
    contents__bg.remove(); 
  }, 500); 
  $('.content').prepend($('<div class="content__bg '+content__bg+'"></div>')); 
}; 
$(function() { 
  setTimeout(function() { 
    editBg('content__bg_img--1'); 
  }, 3000); 
  setTimeout(function() { 
    editBg('content__bg_img--2'); 
  }, 6000); 
  setTimeout(function() { 
    editBg('content__bg_img--3'); 
  }, 9000); 
});

.content { 
  position: relative; 
  width: 220px; 
  height: 160px; 
} 
.content__bg { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-size: 100% 100%; 
  pointer-events: none; 
} 
.content__bg_img--0 {background-image: url('http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg')} 
.content__bg_img--1 {background-image: url('http://anywalls.com/pic/201210/1366x768/anywalls.com-14971.jpg')} 
.content__bg_img--2 {background-image: url('http://www.1366x768.ru/nature/29/park-wallpaper-1366x768.jpg')} 
.content__bg_img--3 {background-image: url('http://wp.widewallpapers.ru/2k/nature/forest/1920x1080/forest-wallpaper-1920x1080-003.jpg')}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
  <div class="content__bg content__bg_img--0"></div> 
</div>