Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Скрипт плавной смены background-image в div (https://javascript.ru/forum/dom-window/50350-skript-plavnojj-smeny-background-image-v-div.html)

macik 20.04.2017 15:11

нет это какой-то глюк, все вроде поправил и теперь работает как надо.
#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 20.04.2017 15:12

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 20.04.2017 15:45

Цитата:

Сообщение от Dilettante_Pro (Сообщение 450426)
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 я это гоняю ...

рони 20.04.2017 15:50

Цитата:

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

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

macik 20.04.2017 15:52

Цитата:

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

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

рони 20.04.2017 15:54

Цитата:

Сообщение от macik
Но есть какой-то глюк.

http://javascript.ru/forum/events/68...tml#post450014

рони 20.04.2017 15:57

Цитата:

Сообщение от macik
А что использовать ?

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

рони 20.04.2017 15:59

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 20.04.2017 16:02

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

macik 20.04.2017 16:16

Цитата:

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

Цитата:

Сообщение от рони (Сообщение 450435)
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()

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


Часовой пояс GMT +3, время: 02:57.