Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.09.2014, 09:58
Интересующийся
Отправить личное сообщение для Nataly12 Посмотреть профиль Найти все сообщения от Nataly12
 
Регистрация: 05.07.2011
Сообщений: 29

Скрипт плавной смены background-image в div
Очень нужен скрипт скрипт плавной смены background-image в div.
Найти нигде не удалось.
Если кто-нибудь знает как это можно сделать(если это вообще возможно), огромная просьба помочь ))
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2014, 11:06
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Что есть "плавная смена"? Как она выглядит?
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2014, 11:59
Интересующийся
Отправить личное сообщение для Nataly12 Посмотреть профиль Найти все сообщения от Nataly12
 
Регистрация: 05.07.2011
Сообщений: 29

Самая обычная смена картинок(прозрачность плавно меняется)
Ответить с цитированием
  #4 (permalink)  
Старый 23.09.2014, 13:42
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Вам нужно при клике или просто через время?
Через анимейт пробовали?

Пример:
$('.img').animate({'opacity':'0'},600,function(){
  $(this).css('background-image':'url(image2.jpg)');
  $(this).animate({'opacity':'1'},600);
});
Ответить с цитированием
  #5 (permalink)  
Старый 23.09.2014, 13:48
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Сообщение от Nataly12
Самая обычная смена картинок(прозрачность плавно меняется)
тебе слайдер нужен чтоль? С эффектом исчезания?
Советую просто погуглить jquery slider или jqyery carousel, наверняка найдется что то подходящее.
Например http://jquery.malsup.com/cycle/ там сразу демо с разными эффектами, в том числе и "затухания"
Ответить с цитированием
  #6 (permalink)  
Старый 23.09.2014, 13:50
Интересующийся
Отправить личное сообщение для Nataly12 Посмотреть профиль Найти все сообщения от Nataly12
 
Регистрация: 05.07.2011
Сообщений: 29

hfts_rider,
Просто через время. Спасибо, подскажите, пожалуйста,а как сделать смену нескольких картинок и прицепить этот код к диву?

krasovsky,Слайдер не подойдет у меня уже готова верстка и меняться должна именно фоновая картинка, а во всех слайдерах картинки картинками, а не фоном. Проблема в том , что я на джава скрипт умею делать только самые просты вещи. Это не заню как реализовать.

Последний раз редактировалось Nataly12, 23.09.2014 в 13:53.
Ответить с цитированием
  #7 (permalink)  
Старый 23.09.2014, 13:57
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

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

1) .csa-head = тот самый див с классом "csa-head"
2) imgHead = массив картинок, сюда впиши их расположение.
3) Где значения "200" это скорость появления и затухания.
4) Где значение "8000", это интервал через какой оно будет изменяться (8000 - это 8 секунд)

var imgHead = [
			'images/imgCsaHead/img.jpg',
			'images/imgCsaHead/img1.jpg',
			'images/imgCsaHead/img2.jpg',
			'images/imgCsaHead/img3.jpg'
		], i=1;
	function csaHead(){

		if(i > (imgHead.length-1)){
			$('.csa-head').animate({'opacity':'0'},200,function(){
				i=1;
				$('.csa-head').css({'background':'url('+imgHead[0]+')'});
			});
			$('.csa-head').animate({'opacity':'1'},200);
		}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);
Ответить с цитированием
  #8 (permalink)  
Старый 23.09.2014, 15:31
Интересующийся
Отправить личное сообщение для Nataly12 Посмотреть профиль Найти все сообщения от Nataly12
 
Регистрация: 05.07.2011
Сообщений: 29

hfts_rider,
Огромное-преогромное спасибо!!! Все получилось. Остался один вопрос, их можно остановить после первого круга? Т.е. все картинки прошли и на последней остановилась анимация.
Ответить с цитированием
  #9 (permalink)  
Старый 23.09.2014, 16:03
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

Нужно просто остановить таймер.

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);
Ответить с цитированием
  #10 (permalink)  
Старый 23.09.2014, 17:31
Интересующийся
Отправить личное сообщение для Nataly12 Посмотреть профиль Найти все сообщения от Nataly12
 
Регистрация: 05.07.2011
Сообщений: 29

hfts_rider,
Спасибо!!!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите, пжлста, найти (или написать) скрипт для смены картинок. Artweb Работа 9 25.02.2011 11:28
Скрипт смены картинок на каждый день года Артемий Б Работа 17 02.12.2010 22:49
Скрипт для динимического изменения div arsen Общие вопросы Javascript 3 30.09.2010 11:29
Скрипт смены картинок - помогите размножить profi555 Ваши сайты и скрипты 6 02.07.2010 23:32
Помогите оптимизировать скрипт смены изображений с анимацией Khmelevsky Элементы интерфейса 5 06.03.2010 19:02