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

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

19.04.201130939

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

Демо



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



Код



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

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


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

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



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



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



Сохраните в социальную сеть
Комментарии (9)
все отлично разбяснено и понятно) но все-равно хочется демо
4
Ок, демо установлено на странице
5
Хорошо!
5
спасибо =)
4
Супер вещь, применить можно)
4
Что очень хорошо, слайдер прост и функционален, подойдет всегда и везде smile
3
а можно заместо ссылок туда фотографии вставить?
2
sima 06.05.2011 в 16:35Спам
"Из этой готовой функции можно сделать не только перелистывание новостей, можно сделать слайдшоу из фотографий."
1
спасибо
2
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт