Слайдер новостей на основе jQuery
Скрипты
Слайдер новостей на основе jQueryДля показа большого количества новостей у вас может не быть достаточно места, либо вы хотите показывать одновременно только один рекламный баннер, но чтобы все баннеры видел пользователь, либо вы просто хотите сделать оригинальное слайд-шоу из картинок или текста. Тогда этот скрипт вам понравится.
Скрипт создан на базе полюбившегося web-программистам фреймворка - jQuery. Поэтому, для работы скрипта, jQuery нужно подключить к странице. Еще раз напоминаю: если ваш сайт создан на базе системы UCOZ, то jQuery подключать не нужно. Остальные мастера, делаем так: в заголовке (в теле HEAD) пишем следующее:
Следующий код - это сам скрипт слайдера. Разместить его вы можете в любом месте страницы в пределах тега HTML. Код слайдера большой - не заблудитесь:
var scrollSpeed='slow';
var ScrollDelay= 8000; //ms
doScrollNext=function(obj){
if($(obj).parent('.scrollNavi').html()!=null){
obj=$(obj).parent('.scrollNavi').parent('div');
}else{
obj=$(obj).parent().parent('.scrollNavi').parent('div');
}
if($(obj).find('.scrollBlock .scrollItem:visible').length!=1){
$(obj).find('.scrollBlock .scrollItem').hide();
$(obj).find('.scrollBlock .scrollItem:first').show();
}
$(obj).find('.scrollBlock .scrollItem:visible').animate({opacity:"hide"},scrollSpeed,function(){
if($(this).html()==$(this).parent().find('.scrollItem:last').html()){
$(this).parent().find('.scrollItem:first').animate({opacity:"show"},scrollSpeed);
}else{
$(this).next('.scrollItem').animate({opacity:"show"},scrollSpeed);
}
});
}
doScrollPrev=function(obj){
if($(obj).parent('.scrollNavi').html()!=null){
obj=$(obj).parent('.scrollNavi').parent('div');
}else{
obj=$(obj).parent().parent('.scrollNavi').parent('div');
}
if($(obj).find('.scrollBlock .scrollItem:visible').length!=1){
$(obj).find('.scrollBlock .scrollItem').hide();
$(obj).find('.scrollBlock .scrollItem:first').show();
}
$(obj).find('.scrollBlock .scrollItem:visible').animate({opacity:"hide"},scrollSpeed,function(){
if($(this).html()==$(this).parent().find('.scrollItem:first').html()){
$(this).parent().find('.scrollItem:last').animate({opacity:"show"},scrollSpeed);
}else{
$(this).prev('.scrollItem').animate({opacity:"show"},scrollSpeed);
}
});
}
doScroll=function(obj){
doScrollNext(obj);
setTimeout(function(){doScroll(obj);},ScrollDelay);
}
$(document).ready(function(){
$('.scrollNext').click(function(){doScrollNext(this);});
$('.scrollPrev').click(function(){doScrollPrev(this);});
$('.scrollBlock .scrollItem').hide();
$('.scrollBlock').each(function(){
$(this).find('.scrollItem:first').show();
var obj=$(this).parent('div').find('.scrollNext');
setTimeout(function(){doScroll(obj);},ScrollDelay);
});
});
</script>
Параметр скрипта scrollSpeed отвечает за скорость смены новостей в слайдере. Может быть как числовым (миллисекунды), так и заранее определенной константой:
- "slow" - медленно
- "normal" - стандартно
- "fast" - быстро
Параметр ScrollDelay скрипта слайдера определяет время, которое одна новость будет отображаться в блоке. Принимать может только числовое значение в миллисекундах.
Со скриптами закончили. Также в теле HEAD нужно прописать стили. Эти стили можете оформить так, как хотите. Показан код стилей для действующего примера слайдера:
.scrollNavi,.scrollBlock{width:200px;}
.scrollBlock{height:100px;border:1px solid #ccc;}
.scrollBlock .scrollItem{display:none;}
.scrollNavi{text-align:left;}
.scrollItem{text-align:center;}
</style>
Теперь нужно оформить блок для слайд-шоу. Порядок тегов и их классы нужно соблюдать строго. Блок ставите туда, где хотите его видеть. Весь блок на 4 новости выглядит так:
<div class="scrollBlock">
<div class="scrollItem">Текст 1</div>
<div class="scrollItem">Текст 2</div>
<div class="scrollItem">Текст 3</div>
<div class="scrollItem">Текст 4</div>
</div>
<div class="scrollNavi">
<div style="float:right;"><a href="javascript://" class="scrollNext" title="Следующий">Следующий</a></div>
<a href="javascript://" class="scrollPrev" title="Предыдущий">Предыдущий</a>
</div>
</div>
Код <div class="scrollItem">Текст 1</div> можно ставить в таком количестве, сколько вам нужно. Если вы прокручиваете 10 новостей, то и код ставите в количестве 10 штук. Внутри кода можно расположить как текст, так и картинки, таблицы, в общем все, что хотите.
Пример работы слайдера, как всегда, можете увидеть на этой странице. На этом все. Удачи всем!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Слайдер новостей на основе jQuery
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
| Категория: | Скрипты |
| Просмотрено: | 16139 |
| Рейтинг: | 4.2/48 |
| Дата добавления: | 2009-12-11 15:41, Пятница |
| Добавил: | Szen |
| Теги: | jquery, Карусель |
Рекомендуем
Дополнительно к Слайдер новостей на основе jQuery
Мини-форум
| № 0 | 2009-12-11 15:41 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Слайдер новостей на основе jQuery". |
| Гость |
| № 1 | 2009-12-14 17:17 |
Gambit | доброго времени суток.. большая просьба помочь новичку.. сайт делаю на ucoz'е.. скрипт подключаю в <head>...</head>.. стиль прописываю в таблице стилей.. блок ставиться - данные не отображаются, хотя я ничего не меняю в коде.. поле отображается.. информация нет.. просьба указать на мою ошибку.. |
| Gambit |
| № 3 | 2009-12-14 22:55 |
| Gambit | слайдер новостей поставил в правый блок сверху.. сайт тестовый - ссылку добавил в профиль.. (решил тут не делать рекламы..) |
| Vlad.. Gambit..™ · WWW |
| № 4 | 2009-12-14 23:28 |
Szen | Gambit, поставьте скрипт после тега BODY. Дело в том, что файл u.js (он содержит jquery) подключается перед закрывающим тегом /HEAD. А по порядку, у вас вначале скрипт, а потом подключается jQuery. Должно быть наоборот. |
| Szen · WWW |
| № 5 | 2009-12-15 00:17 |
| Gambit | действительно причина была в этом.. Szen, спасибо огромное.. |
| Vlad.. Gambit..™ · WWW |
| № 6 | 2009-12-15 17:50 |
| Gambit | Szen, при тестировании скрипта обнаружилось, что при ручном перелистывании "предыдущий" возникает искажение при отображении - несколько страниц отображаются одновременно.. то есть в блок выводиться сразу две новости.. если продолжать перелистывать назад, начинает отображаться одновременно уже три новости.. у вас в примере на странице та же ситуация.. возможно ли как то это исправить или придется подстраиваться под данный баг*?..) |
| Vlad.. Gambit..™ · WWW |
| № 7 | 2009-12-15 18:57 |
| Szen | Gambit, будем исправлять. Скрипт сложный, мог что-нибудь недочесть.  ps: спасибо за обнаружение очепятки! |
| Szen · WWW |
| № 8 | 2009-12-15 19:44 |
| Szen | Gambit, основной скрипт немного подправил. Можете тестировать. Будут вопросы - добро пожаловать! |
| Szen · WWW |
| № 9 | 2009-12-15 21:59 |
| Gambit | к сожалению полностью избавиться от искажения не вышло.. с определённой закономерностью показывается две новости одновременно.. и снова все отображается правильно.. закономерность заключается что баг* проявляется при определённом количестве переходов назад.. если новостей 3 - то нужно примерно 6 переходов.. если 4 - 8 и т. д. т.е. количество новостей умножаем на два.. не знаю поможет ли данная закономерность в решении проблемы, но все же решил поделиться.. |
| Vlad.. Gambit..™ · WWW |
| № 10 | 2009-12-25 13:58 |
| Szen | Gambit, любая закономерность в ошибках, тем более, постоянная, является прямым доказательством неправильного функционирования программы или скрипта. Спасибо за определение этой закономерности. Будем искать метод решения этой проблемы. |
| Szen · WWW |
