Для показа большого количества новостей у вас может не быть достаточно места, либо вы хотите показывать одновременно только один рекламный баннер, но чтобы все баннеры видел пользователь, либо вы просто хотите сделать оригинальное слайд-шоу из картинок или текста. Тогда этот скрипт вам понравится.
Скрипт создан на базе полюбившегося web-программистам фреймворка - jQuery. Поэтому, для работы скрипта, jQuery нужно подключить к странице. Еще раз напоминаю: если ваш сайт создан на базе системы UCOZ, то jQuery подключать не нужно. Остальные мастера, делаем так: в заголовке (в теле HEAD) пишем следующее:
Следующий код - это сам скрипт слайдера. Разместить его вы можете в любом месте страницы в пределах тега HTML. Код слайдера большой - не заблудитесь:
Параметр скрипта scrollSpeed отвечает за скорость смены новостей в слайдере. Может быть как числовым (миллисекунды), так и заранее определенной константой:
Параметр ScrollDelay скрипта слайдера определяет время, которое одна новость будет отображаться в блоке. Принимать может только числовое значение в миллисекундах.
Со скриптами закончили. Также в теле HEAD нужно прописать стили. Эти стили можете оформить так, как хотите. Показан код стилей для действующего примера слайдера:
Теперь нужно оформить блок для слайд-шоу. Порядок тегов и их классы нужно соблюдать строго. Блок ставите туда, где хотите его видеть. Весь блок на 4 новости выглядит так:
Код <div class="scrollItem">Текст 1</div> можно ставить в таком количестве, сколько вам нужно. Если вы прокручиваете 10 новостей, то и код ставите в количестве 10 штук. Внутри кода можно расположить как текст, так и картинки, таблицы, в общем все, что хотите.
Пример работы слайдера, как всегда, можете увидеть на этой странице. На этом все. Удачи всем!
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 1006 |
| Рейтинг: | 5.0/9 |
| Дата добавления: | 11.12.2009 15:41, Пятница |
| Добавил: | Szen |
| Теги: | jQuery, карусель |
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
| № 0 | Пятница, 11.12.2009 15:41 |
| Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Слайдер новостей на основе jQuery". |
| Профиль |
| № 1 | Понедельник, 14.12.2009 17:17 |
| Gambit | доброго времени суток.. большая просьба помочь новичку.. сайт делаю на ucoz'е.. скрипт подключаю в <head>...</head>.. стиль прописываю в таблице стилей.. блок ставиться - данные не отображаются, хотя я ничего не меняю в коде.. поле отображается.. информация нет.. просьба указать на мою ошибку.. |
| Профиль |
| № 3 | Понедельник, 14.12.2009 22:55 |
| Gambit | слайдер новостей поставил в правый блок сверху.. сайт тестовый - ссылку добавил в профиль.. (решил тут не делать рекламы..) |
| ПрофильWWW |
| № 4 | Понедельник, 14.12.2009 23:28 |
| Szen | Gambit, поставьте скрипт после тега BODY. Дело в том, что файл u.js (он содержит jquery) подключается перед закрывающим тегом /HEAD. А по порядку, у вас вначале скрипт, а потом подключается jQuery. Должно быть наоборот. |
| ПрофильWWW |
| № 5 | Вторник, 15.12.2009 00:17 |
| Gambit | действительно причина была в этом.. Szen, спасибо огромное.. |
| ПрофильWWW |
| № 6 | Вторник, 15.12.2009 17:50 |
| Gambit | Szen, при тестировании скрипта обнаружилось, что при ручном перелистывании "предыдущий" возникает искажение при отображении - несколько страниц отображаются одновременно.. то есть в блок выводиться сразу две новости.. если продолжать перелистывать назад, начинает отображаться одновременно уже три новости.. у вас в примере на странице та же ситуация.. возможно ли как то это исправить или придется подстраиваться под данный баг*?..) |
| ПрофильWWW |
| № 7 | Вторник, 15.12.2009 18:57 |
| Szen | Gambit, будем исправлять. Скрипт сложный, мог что-нибудь недочесть. ps: спасибо за обнаружение очепятки! |
| ПрофильWWW |
| № 8 | Вторник, 15.12.2009 19:44 |
| Szen | Gambit, основной скрипт немного подправил. Можете тестировать. Будут вопросы - добро пожаловать! |
| ПрофильWWW |
| № 9 | Вторник, 15.12.2009 21:59 |
| Gambit | к сожалению полностью избавиться от искажения не вышло.. с определённой закономерностью показывается две новости одновременно.. и снова все отображается правильно.. закономерность заключается что баг* проявляется при определённом количестве переходов назад.. если новостей 3 - то нужно примерно 6 переходов.. если 4 - 8 и т. д. т.е. количество новостей умножаем на два.. не знаю поможет ли данная закономерность в решении проблемы, но все же решил поделиться.. |
| ПрофильWWW |
| № 10 | Пятница, 25.12.2009 13:58 |
| Szen | Gambit, любая закономерность в ошибках, тем более, постоянная, является прямым доказательством неправильного функционирования программы или скрипта. Спасибо за определение этой закономерности. Будем искать метод решения этой проблемы. |
| ПрофильWWW |