Плавный переход fadein-fadeout в автовоспроизводимой последовательности изображений
Вложений: 5
Как вы знаете, 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> Картинки для теста кода прикладываю. |
|
Цитата:
спасибо за решение. Скажите, как настроить длительность показа каждого слайда по отдельности? |
gavr,
var interval = 5000; //пауза заменить на массив далее попробуйте продолжить сами |
Цитата:
Теперь осваивайте SVG, иначе без работы останетесь со своей жабой. |
Часовой пояс GMT +3, время: 02:29. |