jQuery - Плагин для ротации GIF и Flash баннеров

2013-01-05
jQuery

Существует множество различных jQuery плагинов каруселей. Но в основном они переключают контент через равные промежутки времени. Для ротации GIF и Flash баннеров требуется переключение через разные промежутки времени, потому что у баннеров разное время проигрывания анимации. В этой статье рассматривается jQuery плагин, который переключает баннеры через разные промежутки времени.

Исходный код и использование

Для ротации GIF и Flash баннеров был создан следующий плагин jquery.bannersRotate.js.

Для начала необходимо подключить библиотеку jQuery и наш плагин:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./jquery.bannersRotate.js" type="text/javascript"></script>

Далее инициализируем плагин и указываем блок с баннерами:

<script type="text/javascript">
    $(document).ready(function() {
        $('#banners-rotate').bannersRotate();
    });
</script>

В теле документа располагаем блок с баннерами, для каждого из которых в параметре "data-duration" прописываем время проигрывания в секундах:

<div id="banners-rotate">
    <div data-duration="12">
        Banner 1 (12 seconds)
    </div>
    <div data-duration="5">
        Banner 2 (5 seconds)
    </div>
    <div data-duration="14">
        Banner 3 (14 seconds)
    </div>
    <div data-duration="8">
        Banner 4 (8 seconds)
    </div>
</div>

Вместо подписей нужно расположить код вставки баннеров. После проделанных действий, баннеры будут переключатся задерживаясь на 12, 5, 14 и 8 секунд друг за другом.

Рабочий пример можно посмотреть в этом файле.

See the Pen jquery.bannersRotate.js example by Atoumus Blog (@atoumus) on CodePen.