бесплатные списки прокси
[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Плавная смена картинок (смена картинок с эффектом затухания)
Плавная смена картинок
worldname Дата: Вторник, 2012-05-01, 16:38 | Сообщение # 1
Генералиссимус
Группа: lown
Сообщений: 202
Статус: Offline
Скрипт плавной смены любых изображений с эффектом затухания. Эффект получается за счет увеличения и уменьшения прозрачности картинок
Пример работы скрипта:






По умолчанию скрипт рассчитан на 2 картинки, но количество сменяющихся картинок можно изменить. Внимание! Работа скрипта кешируется
Описание:
Рабочий скрипт
Код
var image_count = 2;
var interval = 3000;
var time_out = 15;
var i = 0;
var timeout;
var opacity = 100;

function change_image() {
    opacity--;
    var j = i + 1;
    var current_image = 'img_' + i;
    if (i == image_count) j = 1;
    var next_image = 'img_' + j;
    document.getElementById(current_image).style.opacity=opacity/100;
    document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
    document.getElementById(next_image).style.opacity=(100-opacity)/100;
    document.getElementById(next_image).style.filter='alpha(opacity='+(100-opacity)+')';
    timeout = setTimeout("change_image()", time_out);
    if (opacity==1) {
     opacity = 100;
     clearTimeout(timeout);
    }
}

setInterval (function() {i++; if (i>image_count) i=1; change_image();}, interval);


Установка на сайт

Там где собираетесь ставить картинки с эффектом плавной смены подключаем скрипт
Код
<script language="JavaScript" type="text/javascript" src="http://webanetlabs.net/anima.js"></script>
его содержимое чуть выше. По желанию скрипт можно отредактировать: изменить количество картинок, скорость смены изображений. Готовый скрипт рассчитан на 2 картинки
Далее прописываем нужные картинки к которым хотим применить эффект

Код
<img src='http://webanetlabs.net/_fr/2/2290617.png' id="img_1" style="position: absolute;">
<img src='http://webanetlabs.net/_fr/2/0878083.png' id="img_2" style="opacity: 0; filter: alpha(opacity=0);
position: absolute;">
 
форум webanet » Помоги себе сам компьютеры и интернет » uCoz решение проблем » Плавная смена картинок (смена картинок с эффектом затухания)
  • Страница 1 из 1
  • 1
Поиск: