Приветствую Вас Гость • Регистрация • Вход
Понедельник, 16.12.2019
Главная » 2013 » Март » 15 » Простeнький ротатор баннеров на jQuery
08:35
Простeнький ротатор баннеров на jQuery
Здравствуйте, сегодня мы узнаем как написать простенький ротатор баннеров, с помощью jQuery.
И так что же нам нужно для начало...?
Для примера возьмем 3 изображения которые на нужно вывести для поочередного показа.
Задача:

  • Имеется 3 изображения одинаковой ширины и высоты (150x150px), которые необходимо показывать поочередно;
  • Каждое изображение заключено в отдельный блок
    ;
  • Все дивы выше заключены в один
    с id ="rotator";
  • Если блоков с изображениями не найдено, выводить сообщение об ошибке;
  • Скрипт должен создавать новый блок
    в котором будет выведена копия нужного нам изображения;
  • Если найден один блок с изображением, то показываем его и останавливаемся.

Для выполнения пунктов 1-3, создадим HTML каркас:
Код

<div id="rotator">
<div><img src="img/1.jpg" title="Первый баннер" /></div>
<div><img src="img/2.jpg" title="Второй баннер" /></div>
<div><img src="img/3.jpg" title="Третий баннер" /></div>
</div>

Добавим немного CSS для блока id="rotator":
Код

#rotator {
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow: 0 0 5px #FAA872;
-moz-box-shadow: 0 0 5px #FAA872;
box-shadow: 0 0 5px #FAA872;
border: 1px solid #CCC;
overflow: hidden;
height: 150px;
width: 150px;
}

Важно! - Для корректной работы должны быть указаны свойства width и height, остальные по желанию.
Пришла очередь к использованию библиотеки jQuery, подключим ее к нашей странице:
Код
<script type="text/javascript" src="jquery.js"></script>

Дальше у нас на очереди запуск работы нашего скрипта,для этого создадим файл js с условным названием rotator.js
Код

$(document).ready(function(){
// получаем массив блоков с нужными нам изображениями
var banners = $("#rotator div").toArray();
// класс с параметрами
settings = function() {
this.banners = banners; // массив блоков с изображениями
this.sum = this.banners.length; // количество блоков с изображениями
this.timeIn = 2000; // время для появления
this.timeOut = 2000; // время для скрытия
this.timeView= 5000; // тайм-аут для показа
}
var obj = new settings();
if (obj.sum < 1) {
$("#rotator").html("<p>Изображения для показа не найдены!</p>");
}
else {
// скрываем все изображения блока #rotator
$("#rotator div").css({"display":"none"});
// создаем блок для показа с индикатором загрузки для эффектного начала
$("#rotator").prepend("<div id='rotator_view'><img src='/img/load.gif'></div>");
// немного стилей (можно указать через CSS)
$("#rotator_view").css({"height" : "150px"});
$("#rotator_view img").css({"display" : "block","margin" : "22.5px auto",
"text-align" : "center"});
// запускаем функцию показа
view (0);}
function view (num){
// инициализируем экземпляр класса settings()
var obj = new settings();
// если показали все изображения, показываем их снова
if (num >= obj.sum) num = 0;
var interval = setInterval (function(){
// очистка блока показа
$("#rotator_view *").remove();
// копия изображения в блок показа
$(obj.banners[num]).clone().prependTo("#rotator_view");
// показ изображения
$("#rotator_view div").fadeIn(obj.timeIn);
clearInterval(interval);num++;},obj.timeIn);
// скрытие изображения
$("#rotator_view div").fadeOut(obj.timeOut);
// снова запускаем сами себя если изображений больше одного
if (obj.sum > 1) setTimeout(function(){view(num)},obj.timeIn+obj.timeOut+obj.timeView);}});

Ну и после того как создали наг файл с условным названием rotator.js ,конечно же сохраняем его и выводим рядом с нашим файлом библиотеки jQuery.
Будет это выглядеть следующим образом:
Код

/*Подключаем нашу библиотеку jQuery*/
<script type="text/javascript" src="js/jquery.js"></script>
/*Подключим теперь скрипт показа картинок*/
<script type="text/javascript" src="js/rotator.js"></script>
/*Здесь у нас немного стилей*/
<style type="text/css">
#rotator {
-moz-border-radius:5px;
border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow: 0 0 5px #FAA872;
-moz-box-shadow: 0 0 5px #FAA872;
box-shadow: 0 0 5px #FAA872;
border: 1px solid #CCC;
overflow: hidden;
height: 150px;
width: 150px;
}
</style>
/*Ну и конечно же код HTML как же без него то...*/
<div id="rotator">
<div>
<img src='/img/tnk.png' alt='Танчики' title='Танчики' >
</div>
<div>
<img src='/img/zd.png' alt='Гангнам, вперед 3' title='Гангнам, вперед 3' >
</div>
<div>
<img src='/img/gk.png' alt='Говорящий кот' title='Говорящий кот' >
</div>
</div>

Так же можно добавить в наши изображения и ссылки просто прописан немного по другому
Код
<a href='#'><img src='/img/gk.png' alt='Говорящий кот' title='Говорящий кот' ></a>

При появлении и скрытии изображений, используются готовые функции .fadeIn() и .fadeOut(), входящие в библиотеку jQuery. При возможности с помощью функции .animate() можно создать собственные эффекты для появления и исчезновения изображений.
Ну вот собственно и все.
Просмотреть демо и скачать исходники можно ниже. Возникли вопросы, пишите в комментариях - обязательно отвечу.
Демо | Скачать
Категория: jQuery | Просмотров: 3324 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика