vmc.slide 图片轮播 JQuery плагин

Демонстрация

demo

Обновление

v2.0.0 — 2018.3.20

• Ширина карусели может изменяться в соответствии с шириной родительского элемента, поддерживая адаптивный дизайн веб-страниц.
• Исправлена проблема с зазором при анимации перехода между слайдами.
• Добавлены эффекты отображения, фиксированный размер совместим с IE6, нефиксированный размер совместим до IE9. В случае несовместимости отображается переход по умолчанию с плавным появлением и исчезновением.
• Код был переработан, версия 1.x не может быть обновлена без проблем.

Особенности

1. Поддерживает управление воспроизведением с помощью стрелок влево и вправо и кнопок со значком точки.
2. Можно гибко настроить способ воспроизведения и порядок эффектов перехода.
3. Протестировано на различных браузерах, включая IE6, и показало хорошую совместимость.
4. Предоставляет интерфейс для поддержки пользовательских эффектов перехода, что удобно для разработчиков веб-сайтов, которые могут создавать свои собственные эффекты перехода.
5. Оптимизирован алгоритм эффектов перехода для повышения эффективности выполнения.

Использование

<script src="jquery-1.11.2.min.js"></script>
<script src="vmc.slide.js"></script>
<script src="vmc.slide.effects.js"></script>

Метод 1: использование HTML для загрузки данных сцены

<div id="slide">
    <ul>
         <li data-text="这是文本"><a href="javascript:;" target="_blank"><img src="demo1.jpg"/></a></li>
         ...
    </ul>
</div>

<script>
    var options = {};
    $('#slide').vmcSlide(options);
</script>

Метод 2: использование опции «option.data» для загрузки данных сцены

<div id="slide"></div>

<script>
    var options = {
        data: [
            {
                src: 'demo.jpg', // адрес изображения
                text: '这是demo', // текст описания
                href: 'http://www.vomoc.com/slide', // URL ссылки
                target: '_blank' // способ открытия ссылки
            },
            ...
        ]
    };
    $('#slide').vmcSlide(options);
</script>

Опции

data

• Тип: array, значение по умолчанию: []
• Данные сцены
• Описание: Плагин будет объединять данные из li-тегов с данными data для создания окончательных данных сцены.

// Пример
[
    {
        src: 'demo.jpg', // изображение
        text: 'Это demo', // описание
        href: 'http://www.vomoc.com/slide', // ссылка
        target: '_blank' // как открыть ссылку
    }
]

width

• Тип: int/string, значение по умолчанию: 'auto', единица измерения: px
• Ширина
• Описание: Если установлено значение 'auto', ширина карусели будет изменяться вместе с шириной родительского элемента.

height

• Тип: int/string, значение по умолчанию: 'auto', единица измерения: px
• Высота
• Описание: если установлено значение 'auto', высота карусели будет изменяться вместе с высотой родительского элемента.

imgWidth

• Тип: int, значение по умолчанию: 0, единица измерения: px
• Фактическая ширина изображения
• Описание: Когда установлено значение 0, фактическая ширина изображения рассчитывается на основе ширины карусели.

imgHeight

• Тип: int, значение по умолчанию: 0, единица измерения: px
• Фактическая высота изображения
• Описание: когда установлено значение 0, фактическая высота изображения рассчитывается на основе высоты карусели.

minWidth

• Тип: int, значение по умолчанию: 0, единица измерения: px
• Минимальная ширина карусели

minHeight

• Тип: int, значение по умолчанию: 0, единица измерения: px
• Минимальная высота карусели

gridTdX

• Тип: int, значение по умолчанию: 10
• Количество фрагментов по оси X в режиме сетки

gridTd

• Тип: int, значение по умолчанию: 5
• Количество фрагментов по оси Y в режиме сетки

gridOdX

• Тип: int, значение по умолчанию: 30
• Количество фрагментов по оси X в горизонтальном режиме

gridOdY

• Тип: int, значение по умолчанию: 10
• Количество фрагментов по оси Y в вертикальном режиме

sideButton

• Тип: boolean, значение по умолчанию: true
• Отображать ли кнопки перелистывания страниц по бокам

navButton

• Тип: boolean, значение по умолчанию: true
• Отображать ли навигационные кнопки в виде точек

showText

• Тип: boolean/string, значение по умолчанию: 'авто'
• Отображать ли текст описания
• Описание: При значении 'авто' текст будет отображаться только в том случае, если в данных сцены text не пуст.

isHtml

• Тип: boolean, значение по умолчанию: false
• Является ли текст описанием HTML

autoPlay

• Тип: boolean, значение по умолчанию: true
• Автоматическое воспроизведение

ascending

• Тип: boolean, значение по умолчанию: true
• Воспроизведение в порядке возрастания

effects

• Тип: array, значение по умолчанию: ['fade']
• Название эффекта перехода
• Описание: Эффект по умолчанию 'fade' совместим с более старыми версиями IE, другие эффекты требуют включения vmc.slide.effects.js или написания собственных эффектов. Список эффектов можно найти в файле vmc.slide.effects.js. Файл vmc.slide.full.min.js уже содержит файл vmc.slide.effects.js.

ie6Tidy

• Тип: boolean, значение по умолчанию: false
• Упрощение эффектов для IE6

random

• Тип: boolean, значение по умолчанию: true
• Случайный выбор эффекта перехода

duration

• Тип: int, значение по умолчанию: 4000, единица измерения: миллисекунды
• Время задержки изображения

speed

• Тип: int, значение по умолчанию: 800, единица измерения: миллисекунды
• Продолжительность эффекта перехода

hoverStop

• Тип: boolean, значение по умолчанию: true
• Останавливать ли анимацию при наведении курсора

flip

• Тип: function
• Функция обратного вызова при перелистывании
• Параметры:

formIndex  // индекс покидаемого слайда
toIndex // индекс открываемого слайда

created

• Тип: function
• Функция обратного вызова после создания