Главная » Файлы » Прочие скрипты » jQuery
Слайдер новостей на основе jQuery
22.06.14, 15:41:51



Для показа большого количества новостей у вас может не быть достаточно места, либо вы хотите показывать одновременно только один рекламный баннер, но чтобы все баннеры видел пользователь, либо вы просто хотите сделать оригинальное слайд-шоу из картинок или текста. Тогда этот скрипт вам понравится.

Скрипт создан на базе полюбившегося web-программистам фреймворка - jQuery . Поэтому, для работы скрипта, jQuery нужно подключить к странице. Еще раз напоминаю: если ваш сайт создан на базе системы UCOZ, то jQuery подключать не нужно. Остальные мастера, делаем так: в заголовке (в теле HEAD) пишем следующее:

Код
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>


Следующий код - это сам скрипт слайдера . Разместить его вы можете в любом месте страницы в пределах тега HTML. Код слайдера большой - не заблудитесь:

Код
<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 скрипта слайдера определяет время, которое одна новость будет отображаться в блоке. Принимать может только числовое значение в миллисекундах.

Со скриптами закончили. Также в теле HEAD нужно прописать стили. Эти стили можете оформить так, как хотите. Показан код стилей для действующего примера слайдера:

Код
<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>


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

Код
<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>


Код
Текст 1
можно ставить в таком количестве, сколько вам нужно. Если вы прокручиваете 10 новостей, то и код ставите в количестве 10 штук. Внутри кода можно расположить как текст, так и картинки, таблицы, в общем все, что хотите.

Вот и всё...
Категория: jQuery | Добавил: Apocalypse | Теги: на, JQuery, новостей, основе, слайдер
Просмотров: 448 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: