www.Litecode.ru – Сборник рецептов для создания сайтов

Плавная смена изображений на javascript

ГлавнаяJavaScript → Плавная смена изображений

Простой как дважды два плагин плавной смены изображений на базе библиотеки jquery (1.4.2). Работает по принципу наложения одного изображения на другое средствами css. Далее в бесконечном цикле одновременно в противофазе изменяем прозрачность обоим элементам. В момент когда блок скрыт от показа меняем его изображение и ссылку с него. Тестировалось во всех стабильных версиях IE >= 6, Chrome, Safari, Firefox и Opera.


Инструкция по запуску xfade

1. Скачать xfade.zip

2. Включаем в код страницы загрузку jquery,xfade и стили.

<script type="text/JavaScript" src="/demo/js/jquery-1.4.2.js"></script>
<script type="text/JavaScript" src="/demo/js/xfade.js"></script>
<link href="/demo/css/xfade.css" rel="stylesheet" type="text/css" />

3. Заполняем хеш bg. Ключи это id, значения - массивы в которых нулевой член это ссылка с блока, а первый имя атрибута класс с нужным изображением.

<script>
var bg = {
    //'id':['url from block','classname for block']
    '1':['/index.shtml','bg1'],
    '2':['/index.shtml','bg2'],
    '3':['/index.shtml','bg3'],
    '4':['/index.shtml','bg4']
}

4. Вызов функции может принимать два параметра. fade - скорость растворения блоков в миллисекундах. rotate - скорость смены блоков в миллисекундах. По умолчанию fade = 1000, rotate = 3500. Пример с параметрами:

$(document).ready(function() {
	xfade({
            fade      :1000, //speed of image fade
            rotate    :3000, //speed images rotate 
            container :'xfader', // element name for rotate
            title     :'Подробнее'// href title 
	});
});
</script>

5. HTML - элементы можно грузить в любом месте, т.к. плагин инициируется по событию document.ready. Например после всего.

<div id="xfader"></div>

Рабочий пример xfade

<script type="text/JavaScript" src="/demo/js/jquery-1.4.2.js"></script>
<script type="text/JavaScript" src="/demo/js/xfade.js"></script>
<link href="/demo/css/xfade.css" rel="stylesheet" type="text/css" />
    
<script>
var bg = {
    //'id':['url from block','classname for block']
    '1':['/index.shtml','bg1'],
    '2':['/index.shtml','bg2'],
    '3':['/index.shtml','bg3'],
    '4':['/index.shtml','bg4']
};

$(document).ready(function() {
	xfade({
            fade      :1000, //speed of image fade
            rotate    :3000, //speed images rotate 
            container :'xfader', // element name for rotate
            title     :'Подробнее'// href title 
	});
});
</script>

<div id="xfader"></div>