Слайдер новостей на основе jQuery

Скрипты

Рисунок Слайдер новостей на основе jQuery
Слайдер новостей на основе jQuery Слайдер новостей на основе jQuery
оценка: 4.2 из 5
оценок: 48, отзывов: 13
Здравствуйте гости портала и мастера на все руки!
Это пример автоскролла на основе фреймворка jQuery.
А также пример оригинального сдайдера на основе фреймворка jQuery.
Скрипт слайдера подготовили, протестировали и опубликовали на портале SzenProgs. Проверено на Opera 9.64, Firefox 3.5.5 и Internet Explorer 6.
<

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

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

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

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

Code
<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 нужно прописать стили. Эти стили можете оформить так, как хотите. Показан код стилей для действующего примера слайдера:

Code
<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 новости выглядит так:

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

Пример работы слайдера, как всегда, можете увидеть на этой странице. На этом все. Удачи всем!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Слайдер новостей на основе jQuery
Скрипты
Скрипты, инструкции, справочники


Для работы понадобится jQuery.

rss
Категория:Скрипты
Просмотрено:13994
Рейтинг:4.2/48
Дата добавления:2009-12-11 15:41, Пятница
Добавил:Szen
Теги:jQuery, карусель

Мини-форум

1-10 11-13
№ 02009-12-11 15:41
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Слайдер новостей на основе jQuery".
Гость
№ 1
2009-12-14 17:17 Спам
Gambit
Аватар участника Gambit
доброго времени суток..
большая просьба помочь новичку..
сайт делаю на ucoz'е..
скрипт подключаю в <head>...</head>..
стиль прописываю в таблице стилей..
блок ставиться - данные не отображаются, хотя я ничего не меняю в коде..
поле отображается.. информация нет..
просьба указать на мою ошибку..
Gambit
№ 2
2009-12-14 18:05 Спам
Szen
Аватар участника Szen
Gambit, дайте ссылку на страницу. Я посмотрю.
Szen · WWW
№ 3
2009-12-14 22:55 Спам
Gambit
Аватар участника Gambit
слайдер новостей поставил в правый блок сверху..
сайт тестовый - ссылку добавил в профиль..
(решил тут не делать рекламы..)
Vlad.. Gambit..™ · WWW
№ 4
2009-12-14 23:28 Спам
Szen
Аватар участника Szen
Gambit, поставьте скрипт после тега BODY.
Дело в том, что файл u.js (он содержит jquery) подключается перед закрывающим тегом /HEAD. А по порядку, у вас вначале скрипт, а потом подключается jQuery. Должно быть наоборот.
Szen · WWW
№ 5
2009-12-15 00:17 Спам
Gambit
Аватар участника Gambit
действительно причина была в этом..
Szen, спасибо огромное..
Vlad.. Gambit..™ · WWW
№ 6
2009-12-15 17:50 Спам
Gambit
Аватар участника Gambit
Szen, при тестировании скрипта обнаружилось, что при ручном перелистывании "предыдущий" возникает искажение при отображении - несколько страниц отображаются одновременно..
то есть в блок выводиться сразу две новости..
если продолжать перелистывать назад, начинает отображаться одновременно уже три новости..
у вас в примере на странице та же ситуация..
возможно ли как то это исправить или придется подстраиваться под данный баг*?..)
Vlad.. Gambit..™ · WWW
№ 7
2009-12-15 18:57 Спам
Szen
Аватар участника Szen
Gambit, будем исправлять. Скрипт сложный, мог что-нибудь недочесть. smile
ps: спасибо за обнаружение очепятки!
Szen · WWW
№ 8
2009-12-15 19:44 Спам
Szen
Аватар участника Szen
Gambit, основной скрипт немного подправил. Можете тестировать. Будут вопросы - добро пожаловать!
Szen · WWW
№ 9
2009-12-15 21:59 Спам
Gambit
Аватар участника Gambit
к сожалению полностью избавиться от искажения не вышло..
с определённой закономерностью показывается две новости одновременно..
и снова все отображается правильно..
закономерность заключается что баг* проявляется при определённом количестве переходов назад..
если новостей 3 - то нужно примерно 6 переходов..
если 4 - 8 и т. д.
т.е. количество новостей умножаем на два..
не знаю поможет ли данная закономерность в решении проблемы, но все же решил поделиться..
Vlad.. Gambit..™ · WWW
№ 10
2009-12-25 13:58 Спам
Szen
Аватар участника Szen
Gambit, любая закономерность в ошибках, тем более, постоянная, является прямым доказательством неправильного функционирования программы или скрипта. Спасибо за определение этой закономерности. Будем искать метод решения этой проблемы.
Szen · WWW
1-10 11-13
Учавствовать в обсуждении "Слайдер новостей на основе jQuery" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Какой JavaScript фреймворк вы изпользуете?
Всего ответов: 147
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 10
Гостей: 8
Пользователей: 2

SergeyDut, oi_bogidanov1965
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz