Блоки ротации изображений

Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.

Анимированная ротация (смена) изображений - встроенный плагин VcorpJS

В блоке может находиться любое число видимых изображений, до 9 блоков ротации на странице.
Предзагрузка изображений делается автоматически, как и остальные действия.
Ротация изображений НЕ использует основную функцию анимации, используется собственная независимая анимация.

.imgBlock( node , timeBlock , timeImage , paramArray [ , urlArray ] )

Запускает ротацию изображений в блоке node согласно переданным параметрам.

node - ссылка на блок для изображений или его текстовый id

timeBlock - время в миллисекундах между новыми ротациями в блоке (минимум 100).

timeImage - время в миллисекундах ротации очередного изображения (минимум 200).

paramArray - массив параметров (описание ниже).

urlArray - массив строк с URL изображений для автоматической предзагрузки (описание ниже).

Функция возвращает true при успешном запуске ротации, или false если параметры некорректные или другая ошибка.

Содержимое массива параметров paramArray по элементам:

0 - относительный URL папки с изображениями на сервере (конечный слеш добавляется автоматически, если отсутствует), например "/images/photo/"
1 - тип файла - текст с точкой или без точки (например, "jpg" или ".png")
2 - общее количество изображений, учавствующих в ротации (от 2).
3 - количество видимых изображений в блоке ротации (от 1).
4 - ширина (width) каждого изображения в пикселях, число (number).
5 - высота (height) каждого изображения в пикселях, число (number).
6 - отступ между изображениями в пикселях, число (number).
7 - порядок смены изображений.
    Если не указано, то случайный выбор следующего изображения (по умолчанию).
    Если указано, то последовательный вывод 1,2,3...
8 - тип ротации.
    Если не указано, то сначала растворение, потом проявление нового изображения (по умолчанию).
    Если указано, то одновременное растворение старого и проявление нового изображения.

Должно быть указано не менее 7 элементов массива (0-6).
Если height > width, то вертикальный блок, иначе горизонтальный (по умолчанию).
Имена файлов - это цифры, начиная с 1, расширения задаются в массиве.

Для возможности случайного выбора, общее количество изображений должно быть больше количества видимых в 3 и более раза.

Каждое изображение в блоке имеет CSS-класс pb_irotation

Массив параметров urlArray может быть не указан.
Если он Не указан, то все изображения в папке paramArray[ 0 ] должны иметь имена файлов в виде номеров от 1 до paramArray[ 2 ] и типы файлов paramArray[ 1 ]
Если этот массив указан, то количество его элементов - строк с URL-адресами, должно быть не менее paramArray[ 2 ], при этом, если какой-либо URL начинается с "http://" или "https://", то адреса изображений прямые, иначе относительные от папки paramArray[ 0 ]

CSS для блока ротации изображений - этот класс обязателен только при использовании функции .imgBlock()

/* .pb_irotation - для каждого видимого изображения в блоке ротации */
.pb_irotation {
    position:relative; margin:0; padding:0; top:0; left:0; border:none;
}

Визуальный пример блока ротации изображений

Блок ротации ниже организован так:

<div id="myRotationBllock" style="position:relative; margin:0 auto; width:400px; height:100px;"></div>
<script type="text/javascript">
VcorpJS.ready( function() {
    VcorpJS.imgBlock( "myRotationBllock", 5000, 1000, ["/img/i", ".jpg" ,10, 3, 132, 99, 1, 0, 1] );
} );
</script>

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.