Приветствую всех. кто читает данную тему. Подобный эффект я видел на демо-сайте Shape 5, но сказать честно решение их меня не впечатлило (особенно такая необходимость подключать mootols библиотеку), притом что не свое - не трогай :)
Итак, данный скрипт позволяет динамично менять изображения при помощи затухания. Думаю очень пригодится для игровых сайтов. Получилось ничуть не хуже: не тормозит, разницы не видно.
Характеристика скрипта:
-Адаптированность
Вот на каких браузерах я испытывал данный скрипт:
| Internet Explorer | Opera | Google Chrome | Safari | Mozilla Firefox |
| 6.0 | 11.61 | 9.0 | 5.0 | 5.0.1 |
Версия скрипта: 0.9b
Internet Explorer со своими багами не понимает толковых значений z-index. Я даже не стал с ним возиться. 6 версия не отображает position:fixed, так что вам либо придется делать сайт на position:absolute, либо задать фон на <body> и закрыть с помощью условных операторов (браузер агентов) доступ к скрипту...
Приступим к установке скрипта:
На страницу после <body> вставляем следующее:
var imgArray = new Array("img1", "img2", "img3");
var delayTime = 10000; //1 sec = 1000 (ms)
var fadeTime = 1000; //1 sec = 1000 (ms)
var startZ = -100; //z-index
function ArrayShuffle(a) { var d, c, b = a.length; while (b) {c = Math.floor(Math.random() * b); d = a[--b]; a[b] = a[c]; a[c] = d } return a;};ArrayShuffle(imgArray); //ArrayShuffle (перемешка картинок. Этот кусок можно удалить, если не нужен) </script>
<script src="http://xteam-area.ucoz.com/BackgroundSlide.js"></script>
Заливаем скрипт из прикреплённого архива в папку js
Разберем некоторые параметры:
imgArray - вместо img1, img2... вставляете пути к изображениям. Ссылок может быть сколько угодно
delayTime - интервал смены картинок. Советую ставить не менее 30000 (30 секунд), иначе получите раздраженных пользователей.
fadeTime - время анимации (затухания) изображения
startZ - начальный z-index (если не знаем, пускай так и остается)
Функция ArrayShuffle может по необходимости удалена. К сожалению не могу сказать кто автор этой функции (источник не указан). Используется в данном скрипте для показа случайного изображения после загрузки страницы.
Вот и все! Наслаждайтесь!
Для того, чтобы сделать этот скрипт на опции необходимо:1) Подключенная библиотека cookies.js
2) удалить в скрипте первую строку - animBG(startZ);
3) Дописать на нужной странице код:
<script>
$('.startAnimator').click(function(){
var chkAnSc = $('.startAnimator').attr('checked');
if(chkAnSc=='checked'){
setCookie('animator', 3650, 100);
}else{
eraseCookie('animator');};
});
if(getCookie('animator')){
$('.startAnimator').attr('checked', 'checked');
animBG(startZ);
}
</script>
