Скрипт плавной смены background-image в div

[kostyanet]

Слайдер не подойдет у меня уже готова верстка и меняться должна именно фоновая картинка

Не угадали. Картинка - такой же контейнер как любой другой (только для пикселов), но зато у нее есть высота и ширина в отличии от других. С одной стороны это создает некоторые проблемы, с другой - создаются другие проблемы. Интегрально примерно эквипенисуально.

[macik]

var imgHead = [
			'images/imgCsaHead/img.jpg',
			'images/imgCsaHead/img1.jpg',
			'images/imgCsaHead/img2.jpg',
			'images/imgCsaHead/img3.jpg'
		], i=1;
	function csaHead(){
		/* CSA head */
		if(i > (imgHead.length-1)){
			clearInterval(intervalCsaHead); // Остановка таймера
		}else{
			$('.csa-head').animate({'opacity':'0'},200,function(){
				$('.csa-head').css({'background':'url('+imgHead[i]+')'});
				i++;
			});
			$('.csa-head').animate({'opacity':'1'},200);
		}
		
	}
	var intervalCsaHead = setInterval(csaHead,8000);

Привет. Спасибо за код. Не подскажите, у меня он меняет только вторую картинку и останавливается ... он не перебегает все картинки ...?!

[egor8]

(не забудь подключить jquery)

1) .csa-head = тот самый див с классом "csa-head"

Пожалуйста, помогите пример последний заставить работать, не получается.

Подключаю:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Что должно быть в div ? Может так:

<div class="csa-head"><script> csaHead(); </script></div>

[рони]

egor8,

$(function() {
//сюда весь код из примера
});

[Dilettante_Pro]

<style>
  .csa-head {width:300px;
                 height:150px;
                 background: url("http://javascript.ru/cat/list/mobile.jpg");
   }
</style>
<div class="csa-head"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var imgHead = [
			'http://javascript.ru/cat/list/donkey.gif',
			'http://javascript.ru/cat/list/js.gif',
			'http://javascript.ru/cat/list/project.jpg',
			'http://javascript.ru/cat/list/appscript.png'
		], i=1;
	function csaHead(){
		/* CSA head */
		if(i > (imgHead.length-1)){
			 i = 0;
                         //clearInterval(intervalCsaHead); // Остановка таймера
		}
		$('.csa-head').animate({'opacity':'0'},1000,function(){
			$('.csa-head').css({'background':'url('+imgHead[i]+')'});
				i++;
			});
		$('.csa-head').animate({'opacity':'1'},1000);
		
		
	}
	var intervalCsaHead = setInterval(csaHead,3000);
</script>

[egor8]

Ребята у меня задача стоит просто, помогите...
Есть картинка в шапке logo.gif анимашка небольшая, после того как она отработает, на место неё должна встать другая статичная картинка logo_light.png.
И только после перегрузки браузера, снова все повторяется.

Пишу по аналогии поста, не срабатывает:

<style>
  .csa-head {width:140px; height:150px; background: url("logo.gif");}
</style>

<div class="csa-head"></div>

Картинки лежат в этой же папке, где и код 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var imgHead = [
			'logo_light.png'
		], i=1;
	function csaHead(){
		/* CSA head */
		if(i > (imgHead.length-1)){
			clearInterval(intervalCsaHead); // Остановка таймера
		}else{
			$('.csa-head').animate({'opacity':'0'},200,function(){
				$('.csa-head').css({'background':'url('+imgHead[i]+')'});
				i++;
			});
			$('.csa-head').animate({'opacity':'1'},200);
		}
		
	}
	var intervalCsaHead = setInterval(csaHead,8000);
</script>

[рони]

egor8,

<script>
$(function() {
$('.csa-head').delay(8000).animate({'opacity':'0'},200,function(){
        $('.csa-head').css({'background':'url(logo_light.png)'}).animate({'opacity':'1'},200);
      });
});
</script>

[egor8]

Все отлично! И еще письма почему-то не приходят на почту, приходится сюда смотреть самому. Хотя подписка есть.

[macik]

Ребята подскажите! Как подключить к новым элементам

<style>
.csa-head {
  	background: url("/images/new/foto_index/IMG_1255-Panorama.jpg") no-repeat center;
  	z-index: 0;
	min-height: 600px;
    margin-top: -50px;
	margin-right: 0;
	margin-left: 0;
	-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
    display: block;
    background-size:cover;
   }
</style>

background: url меняется через скрипт, но теряется все остальные данные, как их закрепить?

[macik]

Как закрепить CSS стиль ? почему-то меняется CSS после смены фона!