Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 16.07.2015, 15:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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

Сообщение от рони Посмотреть сообщение
gavr,
Автоматическая смена картинок через заданное время
рони,
спасибо за решение. Скажите, как настроить длительность показа каждого слайда по отдельности?
Ответить с цитированием
  #4 (permalink)  
Старый 16.07.2015, 17:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

gavr,
var interval = 5000; //пауза
заменить на массив далее попробуйте продолжить сами
Ответить с цитированием
  #5 (permalink)  
Старый 16.07.2015, 18:23
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать плавный переход для onmouseover Demidoff Общие вопросы Javascript 3 23.03.2014 12:52
плавный переход через javascript blacklool (X)HTML/CSS 1 19.01.2014 16:04
Плавный переход по пунктам горизотального меню Nailya jQuery 0 13.05.2013 17:44
fadeOut и fadeIn Tums37 jQuery 15 22.07.2012 10:58
JS и getURL плавный переход к anchor Blizzart Общие вопросы Javascript 4 16.01.2011 17:48