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

[macik]

нет это какой-то глюк, все вроде поправил и теперь работает как надо.

#foto_index{
	transition:all 3s ease;
	 -webkit-transition:all 3s ease;
	 -moz-transition:all 3s ease;
	 -o-transition:all 3s ease;
	opacity: 1;
	background: url("/images/new/foto_index/01.jpg") no-repeat center;
	z-index: -2;
	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%; /* Современные браузеры */
    background-size:cover;
}

var mas = [
			'/images/new/foto_index/01.jpg',
			'/images/new/foto_index/IMG_0875.jpg',
			'/images/new/foto_index/IMG_1043.jpg',
			'/images/new/foto_index/IMG_1109.jpg',
			'/images/new/foto_index/IMG_1077.jpg',
			'/images/new/foto_index/IMG_0985.jpg'
		], i=1;
function csaHead(){
	if(i > (mas.length-1)){
		document.getElementById('foto_index').style.backgroundImage="url('"+mas[0]+"')";
		i=0;
 	}else{
 		document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 		i++;
 	} 	
}
var intervalCsaHead = setInterval(csaHead,5000);

[Dilettante_Pro]

macik,
Последний вариант вашего скрипта можно упростить

var mas = [
			'/images/new/foto_index/01.jpg',
			'/images/new/foto_index/IMG_0875.jpg',
			'/images/new/foto_index/IMG_1043.jpg',
			'/images/new/foto_index/IMG_1109.jpg',
			'/images/new/foto_index/IMG_1077.jpg',
			'/images/new/foto_index/IMG_0985.jpg'
		], i=1;
function csaHead(){
	if(i > (mas.length-1)){
		i=0;
 	}
 	document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 	i++; 	 	
}
var intervalCsaHead = setInterval(csaHead,5000);

А насчет появления картинок - можно сделать первую прокрутку втемную и с нулевой задержкой.

[macik]

var mas = [
			'/images/new/foto_index/01.jpg',
			'/images/new/foto_index/IMG_0875.jpg',
			'/images/new/foto_index/IMG_1043.jpg',
			'/images/new/foto_index/IMG_1109.jpg',
			'/images/new/foto_index/IMG_1077.jpg',
			'/images/new/foto_index/IMG_0985.jpg'
		], i=1;
function csaHead(){
	if(i > (mas.length-1)){
		i=0;
 	}
 	document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 	i++; 	 	
}
var intervalCsaHead = setInterval(csaHead,5000);

Спасибо ! Но есть какой-то глюк. Я думал что это картинка не успевает загружайся ... А нет. если окно долгое время на заднем плане или свернуто, то потом картинка не переходит плавно, а тупо с пустого в картинку прыгает ... Пока скрипт весь цикл не пройдет будет так рвать ...
Вот тут http://d-fitness.com.ua/new/start я это гоняю ...

[рони]

Пока скрипт весь цикл не пройдет будет так рвать ...

ещё один аргумент, чтобы никогда не использовать setInterval

[macik]

ещё один аргумент, чтобы никогда не использовать setInterval

А что использовать ?

[рони]

Но есть какой-то глюк.

Часики - реалтайм.

[рони]

А что использовать ?

проще setTimeout, а лучше на данный момент requestAnimationFrame

[рони]

macik,

var mas = [
      '/images/new/foto_index/01.jpg',
      '/images/new/foto_index/IMG_0875.jpg',
      '/images/new/foto_index/IMG_1043.jpg',
      '/images/new/foto_index/IMG_1109.jpg',
      '/images/new/foto_index/IMG_1077.jpg',
      '/images/new/foto_index/IMG_0985.jpg'
    ], i=1;
function csaHead(){
  if(i > (mas.length-1)){
    i=0;
 	}
 	document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 	i++;
  setTimeout(csaHead,5000)
}
csaHead()

[macik]

Я почитала и выходит что requestAnimationFrame(); самое оно! все остальное крутит loop и в фоновом режиме ... только хром умеет замедлять анимация если вкладка не активна.

[macik]

ещё один аргумент, чтобы никогда не использовать setInterval

var mas = [
      '/images/new/foto_index/01.jpg',
      '/images/new/foto_index/IMG_0875.jpg',
      '/images/new/foto_index/IMG_1043.jpg',
      '/images/new/foto_index/IMG_1109.jpg',
      '/images/new/foto_index/IMG_1077.jpg',
      '/images/new/foto_index/IMG_0985.jpg'
    ], i=1;
function csaHead(){
  if(i > (mas.length-1)){
    i=0;
 	}
 	document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 	i++;
  setTimeout(csaHead,5000)
}
csaHead()

Что то не работает этот вариант.