Показать сообщение отдельно
  #1 (permalink)  
Старый 16.07.2015, 14:39
Новичок на форуме
Отправить личное сообщение для gavr Посмотреть профиль Найти все сообщения от gavr
 
Регистрация: 16.07.2015
Сообщений: 2

Плавный переход fadein-fadeout в автовоспроизводимой последовательности изображений
Как вы знаете, flash-баннеры перестали поддерживаться браузерами (Мозила, Хром уже блокируют). Все flash-баннеры в один день заблокировались.

Я переписал свой баннер с flash на javascript. Механика у него очень простая. Есть несколько изображений, которые меняются друг за другом через заданный интервал времени.

Напишите, пожалуйста, как изменить код, чтобы изображения баннера переключались плавно, с помощью эффектив плавного исчезновения-появления fadein, fadeout.

Код прикладываю (может, кому он также будет полезен):
<html>
<head>
	<title>Баннер на джаваскрипте</title>
</head>
<!--Использованные в баннере стили-->
<style>
div.linkedFlashContainer {position: relative; z-index: 1; border: 1px solid black; margin: 10px 0 10px 0; width: 980px; height: 60px;} /**Рамка вокруг баннера**/
a.flashLink {overflow: hidden;z-index: 2;top: 0;  left: 0;display: block; position: absolute; z-index: 2; width: 980px; height: 60px;background: url("1px.gif");} /*Ссылка блоком поверх баннера*/
</style>
<body>
<!--Ротация-->
<div class="linkedFlashContainer">
	<a target="_blank" class="flashLink" href="#"></a>
	<img src="zaglushka.jpg" style="width:980px;height:60px" name="slide_show">
</div>
<!--Конец Ротация-->

<!--Скрипт-->
	<script type="text/javascript">all_images = new Array ("1.jpg","2.jpg","3.jpg");var ImgNum = 0;var ImgLength = all_images.length - 1;var delay = 1500;var lock = false;var run;function chgImg(direction) {if (document.images) {  ImgNum = ImgNum + direction;  if (ImgNum > ImgLength) { ImgNum = 0; }  if (ImgNum < 0) { ImgNum = ImgLength; }  document.slide_show.src = all_images[ImgNum]; }}function auto() { if (lock == true) {  lock = false;  window.clearInterval(run); } else if (lock == false) {  lock = true;  run = setInterval("chgImg(1)", delay); }}</script>
	
	<!--Автозапуск смены изображений в баннере-->
	<script type="text/javascript"> auto();</script>
	<!--Конец Автозапуск смены изображений в баннере-->
	
	<!--Конец Скрипт-->

</body>
</html>


Картинки для теста кода прикладываю.
Изображения:
Тип файла: jpg 1.jpg (4.8 Кб, 1 просмотров)
Тип файла: gif 1px.gif (43 байт, 8 просмотров)
Тип файла: jpg 2.jpg (5.2 Кб, 1 просмотров)
Тип файла: jpg 3.jpg (4.8 Кб, 2 просмотров)
Тип файла: jpg zaglushka.jpg (1.2 Кб, 0 просмотров)
Ответить с цитированием