Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Плавный переход fadein-fadeout в автовоспроизводимой последовательности изображений (https://javascript.ru/forum/misc/57037-plavnyjj-perekhod-fadein-fadeout-v-avtovosproizvodimojj-posledovatelnosti-izobrazhenijj.html)

gavr 16.07.2015 14:39

Плавный переход 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>


Картинки для теста кода прикладываю.

рони 16.07.2015 15:38

gavr,
http://javascript.ru/forum/dom-windo...tml#post232800

gavr 16.07.2015 16:59

Цитата:

Сообщение от рони (Сообщение 379999)

рони,
спасибо за решение. Скажите, как настроить длительность показа каждого слайда по отдельности?

рони 16.07.2015 17:52

gavr,
var interval = 5000; //пауза
заменить на массив далее попробуйте продолжить сами

kostyanet 16.07.2015 18:23

Цитата:

Сообщение от gavr
Все flash-баннеры в один день заблокировались.

Ну наконец-то!

Теперь осваивайте SVG, иначе без работы останетесь со своей жабой.


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