В последнее время я очень часто наблюдаю всевозможные виды каруселей на всевозможных сайтах. Как украинских, так и иностранных.
Одна из первых каруселей, попавшихся мне на глаза, была флешовая на бывшем сайте UMC. После UMC был Amazon.com, они также используют флеш карусель. Флешовые карусели хороши тем, что они более красочны, чем карусели построенные посредством (HTML,CSS)+JS. После флешовых каруселей я стал интересоваться джава-скриптовыми. Для примера возьмем такие популярные сайты как Nytimes или Америка онлайн. Из российских порталов заметил карусель на mail.ru. Что касается украинских проектов, не считая UMC, каруселями стали пользоваться активнее... Так как карусель это маленькое пространство куда можно уместить много информации... Минимум усилий - максимум полезности...
Гугля этот вопрос я натыкался на множество бесплатных примеров, с использованием всевозможных библиотек. Ajax, JQuery, Prototype, Классы на JS... Вертикальные карусели, горизонтальные карусели... Карусели с прелоадом, без него... 2 карусели на странице и т. д. и т. п. Сотни строчек кода, в которых не хочется разбираться, а проще написать свое решение.
Я хочу сделать обзор трех вариантов решения карусели, которые используются на трех разных известных сайтах в уанете.
Первый из вариантов:
bigmir)net.
В данном случае карусель реализована при помощи аякса и нарезки html-кешей. Обьясню более подробно сам принцип.
Имеется 10 картинок, на экране видимых только 3 картинки, соответственно у нас будет 4 html-кеша по три картинки (3 уникальных кеша и четвертый кеш будет состоять из 1 уникальной картинки и двух добавленных раннее картинок). Происходит так называемая нормализация... При нажатии на кнопку вправо или влево мы аяксом дергаем необходимый нам кеш и на место старого ставим новый. Задумка как видим интересная. Тем более при отключенном JS мы рандомно подсасываем любой из кешей, тем самым имитируем работу карусели.
Плюсы и минусы решения.
Плюсы:
1) Работа на основе кешей, существенно облегчает загрузку страницы.
2) Загрузка Аяксом не забирает много времени и мы видим новые три картинки.
3) Простота реализации - максимум эффекта.
4) При отключенном JS мы каждый раз будем видеть новые картинки.
5) 4) Работает IE 6.0-7.0 Safari, Opera, Firefox...
Минусы:
1) При отключенном JS для смены картинок необходимо зарефрешить страницу.
Второй вариант:
novynar.com.ua
Здесь абсолютно другой вариант решения реализации карусели. В данном случае мы имеем так называемую вращающуюся карусель. Тоесть карусель вращается (эффект движения) по кругу.
Имеется 10 картинок, видимых 4. Остальные 6 спрятаны в скрытом диве. При нажатии на кнопку вправо или влево происходит плавный прирост margin-right или margin-left. Тем самым реализуется эффект движения, одна картинка прячется в срытый див, а другая выезжает из этого дива. Вращение по кругу реализуется клонированием этих 10 картинок. В итоге мы имеем два дива по 10 картинок стоящих друг за другом. Просматривая первый див, следом идет второй. Потом они меняются. Этот эффект интересно наблюдать фаербагом в фаерфоксе.
Плюсы и минусы решения.
Плюсы:
1) Эффект движения.
2) Благодаря верстке, при отключенном JS мы наблюдаем горизонтальный скролл всех картинок.
3) Реализация через класс. Возможность размещения на странице бесконечное колличество каруселей, регулирование скорости карусели, регулирование количества видимых картинок и т.д и т.п.
4) Работает IE 6.0-7.0 Safari, Opera, Firefox...
Минусы:
1) При большом колличестве картинок наблюдается эффект тормоза JS.
2) При большом колличистве картинок все они загружаются в скрытый див - снижается скорость загрузки страницы.
3) Благодаря верстке в некоторых старых браузерах не поддерживающих скрытые дивы очень интересно все это смотрится. (старая Opera под Linux)
4) Благодаря верстке в Opere в режиме Ctrl-F11 схлапывается весь сайт с такой каруселью.
Третий вариант:
korrespondent.net*
Третий вариант. Верстка на основе списка (ul, li). Каждая картинка это элемент списка. Видимых картинок 4. Всего 10. Все 10 картинок (урлы на эти картинки), лежат во внешнем JS массиве. При загрузке страницы JS рандомит 4 видимые картинки. С рандомом картинок рандомится и сам JS массив. Мы видим первые 4 элемента массива. При нажатии кнопки вправо или влево происходит вырезание элемента li и на его место вставка нового li с новой картинкой. Благодаря такому механизму происходит эффект движения. На загрузку картинки поставлен прелоадер, тоесть пока картинка не загрузилась мы видим вращающийся кружок. Большое преимущество этой карусели, что на нее повешено событие перехватывающее вращание колесика мышки. Тоесть можно легко пробежаться по всем картинкам вращая колесо - очень удобно.
Плюсы и минусы решения.
Плюсы:
1) При большом количестве картинок ничего страшного, все картинки хранятся в отдельно вынесенном JS массиве.
2) Довольно простая верстка.
3) Эффект прелоадера.
4) Эффект скролла.
5) Нету эффекта торможения JS.
6) Быстрая загрузка страницы
7) Работает IE 6.0-7.0 Safari, Opera, Firefox...
Минусы:
1) Старые браузеры неадекватно реагируют на очищение ul.
2) При отключенном JS мы видим статику в 3 картинки и никакого эффекта карусели.
* Последний вариант карусели, в скором времени появится на Корр.нете.
Вот три варианта решения карусели. Решать Вам, какой вариант наиболее хорош... Конечно же реализаций море. Но мне кажется эти три самый ходовые. Кто писал карусели на аяксе, с подгрузкой в скрытый див. Буду рад за предложение реализации.
Надеюсь я секономил кому-то время.
Все эти решения можно просмотреть на приведенных сайтах.
Также вот ссылочка на ресурс: dynamicdrive.com. Тут тоже можно найти кое-что полезное.
Спасибо за внимание.
В мире программного обеспечения, ударение всегда ставилось на революцию. Вы делаете небольшую и простую вещь. Позже добавляете слой функциональности, медленно развиваете, делаете эту вещь больше, сохраняя при этом уникальность. В этой статье речь пойдет о том, как большинство Javascript библиотек превращаются из обычных вещей в хорошие продукты. YUI не исключение.
