Javascript-форум (https://javascript.ru/forum/)
-   Работа (https://javascript.ru/forum/job/)
-   -   Помогите, пжлста, найти (или написать) скрипт для смены картинок. (https://javascript.ru/forum/job/4797-pomogite-pzhlsta-najjti-ili-napisat-skript-dlya-smeny-kartinok.html)

Artweb 21.08.2009 13:18

Помогите, пжлста, найти (или написать) скрипт для смены картинок.
 
Здравствуйте, уважаемые JavaScript-специалисты.
Помогите, пжлста, найти скрипт, который будет плавно менять картинки (желательно с эффектом затухания картинок) через определенное время.
:help:
Я заемучался копаться в сети, нахожу не то, что нужно.

Tim 21.08.2009 17:37

Берём HTML

<img src="Голубые холмы.jpg" id="image">

<br><br>

<input type="button" value=" START " onclick="dissolution(0)">



прикручиваем к нему скрипт

<script type="text/javascript">

	// Предварительная загрузка изображений
	var Images = new Array(4);
	
	Images[0]  = new Image(48, 48);
	Images[0].src  = 'Голубые холмы.jpg';
	
	Images[1]  = new Image(48, 48);
	Images[1].src  = 'Закат.jpg';
	
	Images[2]  = new Image(48, 48);
	Images[2].src  = 'Зима.jpg';
	
	Images[3]  = new Image(48, 48);
	Images[3].src  = 'Водяные лилии.jpg';

	document.getElementById("image").style.opacity = 1;
	document.getElementById("image").style.filter = 100;
	
	count = 1;

	function dissolution(type)
	{
		// Путные браузеры
		var opacity = document.getElementById("image").style.opacity;
		
		opacity = parseFloat(opacity);
		
		filter = opacity*100;
		
		// Растворение
		if ( type == 0 )
		{
			if ( opacity > 0.05 )
			{
				// Путные браузеры
				document.getElementById("image").style.opacity = opacity - 0.01;
				
				// Осёл
				document.getElementById("image").style.filter = "alpha(opacity="+filter+")";
				
				// "Скорость" затухания
				setTimeout("dissolution(0)", 20);
			}
			else
			{
				setTimeout("dissolution(1)", 20);
				
				document.getElementById("image").src = Images[count].src;
				if ( count < 3 ) count++; else count = 0;
			}
		}
		// Появление
		else
		{
			if ( opacity < 1 )
			{
				opacity = opacity + 0.01;
				
				// Путные браузеры
				document.getElementById("image").style.opacity = opacity;
				
				// Осёл
				document.getElementById("image").style.filter = "alpha(opacity="+filter+")";
				
				// "Скорость" появления
				setTimeout("dissolution(1)", 10);
			}
			else
			{
				// Время показа картинки
				setTimeout("dissolution(0)", 2000);
			}
		}
	}

</script>


Кидаем это всё в папку Мои рисунки -> Образцы рисунков, запускаем, жмём кнопку и смотрим слайд-шоу

P.S.: Возможно код не идеален - собрал за 10 минут.

Tim 21.08.2009 17:54

Цитата:

Images[0] = new Image(48, 48);
разрешения настроите, хотя можно и так оставить - почему то они не на что не влияют. По крайней мере не вооружённым глазом не заметно

Евгений Иванов 24.08.2009 03:09

http://www.irinakruzhilina.com/play/opera/43/31

откройте страницу, не двигайте мышь.
или переключайте картинки.

моя работа.

myboat 03.11.2010 21:25

Спасибо за скрипт Тим.

Я ищу нечто похожее, но чтобы запускалось само.

Т.к. у меня задача прокручивать несколько серий на странице одновременн.

Заранее блдагодарю,
Илья.

Tim 04.11.2010 00:34

myboat,
:) ну вы и тему раскопали. Я уж забыл, что это я писла, думал анку ломанули.

Чтобы запустить "автоматом" (я так понимаю, что это после загрузки страницы) прикрутите обработчик к событию "onload".

onload = function(){
    dissolution(0);
}

Павел Пичужкин 23.02.2011 15:55

Пожалуйста, подскажите, как сделать так
 
Пожалуйста, подскажите, как сделать так, чтобы скрипт после окончания показа повторял сначала всю последовательность картинок, а то когда картинки кончаеются, он всё время только последнюю повторяет. :( Заранее спасибо!

B~Vladi 24.02.2011 09:13

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

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

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

Gvozd 25.02.2011 04:13

Павел Пичужкин,
сколько платите?

Павел Пичужкин 25.02.2011 11:28

HTML я знаю очень хорошо. А с JavaScript-ом У меня действительно туго. Понимаю, но совсем поверхностно. Спасибо за ссылки, постараюсь чему-нибудь научиться. :thanks:


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