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

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

Демо



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

<script type="text/javascript" src="//yraaa.ru/test/9/img/jquery-1.3.2.min.js"></script>

Код

<script type="text/javascript"> 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 скрипта слайдера определяет время показа одной новости (в миллисекундах).

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

<style type="text/css"> .scrollNavi,.scrollBlock{width:200px;} .scrollBlock{height:100px;border:1px solid #ccc;} .scrollBlock .scrollItem{display:none;} .scrollNavi{text-align:left;} .scrollItem{text-align:center;} </style>

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

<div> <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 штук. Внутри кода можно расположить как текст, так и картинки, таблицы, в общем все, что хотите.