1

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

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);
1
  • 1
    картинки не анимируются по дефолту, можно сделать такой фокус, как наложить псевдоэлемент ::before, или ::after и сделать его прозрачным. И при наведении делать opacity:1; Opacity - анимируется.
    – user190134
    14 янв 2017 в 18:52

1 ответ 1

3

Использование 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>

3
  • А как сделать что бы через определенное время менялись? 14 янв 2017 в 20:52
  • И нужно что бы менялось 3 фотографии 14 янв 2017 в 20:59
  • @ДмитрийКозлов, обновил ответ. Смотрите
    – Yuri
    14 янв 2017 в 22:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.