JQuery слайдер для новостей на сайте

JQuery слайдер для новостей на сайте

62011-04-1941199Денис Абдуллин
Для того, чтобы сэкономить место на сайте, сделать упрощенный и компактный вид, Вам понадобится JQuery слайдер для новостей. Из этой готовой функции можно сделать не только перелистывание новостей, можно сделать слайдшоу из фотографий. Сделать можно что угодно, слайдер будет транслировать то, что помещено в специальные блоки. Пример можно привести очень известный: Вы, наверное, часто видите на сайтах рекламу от Google, так вот именно там применяется схожий по аналогии скрипт.

Демо



Для начала Вам необходимо подключить JQuery к сайту (можно скачать и загрузить на собственный сайт). Можно использовать следующий код:



Код



Параметр скрипта scrollSpeed отвечает за скорость смены новостей в слайдере. Может быть как числовым (миллисекунды), так и одним из приведенных ниже:

slow - медленно
normal - стандартно
fast - быстро


Параметр ScrollDelay скрипта слайдера определяет время показа одной новости (в миллисекундах).

Разумеется, без каскадного стиля нам не обойтись.



Теперь нужно оформить блок для слайд-шоу. Порядок тегов и их классы нужно соблюдать строго. Блок вставляете туда, где бы Вы хотители его увидеть. Для четырех новостей используется следующая структура:



Код <div class="scrollItem">Блок 1</div> можно ставить в таком количестве, сколько вам нужно. Если вы прокручиваете 10 новостей, то и код ставите в количестве 10 штук. Внутри кода можно расположить как текст, так и картинки, таблицы, в общем все, что хотите.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (9)
Василий Петров 2011-05-06 в 15:01 / МатериалСпам
а можно заместо ссылок туда фотографии вставить?
2
sima 2011-05-06 в 16:35 / МатериалСпам
"Из этой готовой функции можно сделать не только перелистывание новостей, можно сделать слайдшоу из фотографий."
1
Василий Петров 2011-05-06 в 22:10 / МатериалСпам
спасибо
2
Оксана Чудина 2011-04-20 в 17:27 / МатериалСпам
Что очень хорошо, слайдер прост и функционален, подойдет всегда и везде smile
3
Артем Василькин 2011-04-20 в 07:10 / МатериалСпам
все отлично разбяснено и понятно) но все-равно хочется демо
4
Денис Абдуллин 2011-04-20 в 11:46 / МатериалСпам
Ок, демо установлено на странице
5
Дамир Гаянов 2011-04-20 в 12:55 / МатериалСпам
Хорошо!
5
Артем Василькин 2011-04-20 в 14:48 / МатериалСпам
спасибо =)
4
Александр Ильин 2011-04-20 в 17:22 / МатериалСпам
Супер вещь, применить можно)
4
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.