Слайдер новостей на основе jQuery. Скрипты. Блог. Портал SzenProgs
 

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

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

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



Вы можете выразить свою благодарность администрации портала отправив SMS-кой выбранное вами количество денежек:



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

Категория:Скрипты
Просмотрено:1006
Рейтинг:5.0/9
Дата добавления:11.12.2009 15:41, Пятница
Добавил:Szen
Теги:jQuery, карусель

Внимание

Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.

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

Мини-форум

№ 0Пятница, 11.12.2009 15:41
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Слайдер новостей на основе jQuery".
Профиль
№ 1Понедельник, 14.12.2009 17:17
Gambit
Аватар участника Gambit
доброго времени суток..
большая просьба помочь новичку..
сайт делаю на ucoz'е..
скрипт подключаю в <head>...</head>..
стиль прописываю в таблице стилей..
блок ставиться - данные не отображаются, хотя я ничего не меняю в коде..
поле отображается.. информация нет..
просьба указать на мою ошибку..
Профиль
№ 2Понедельник, 14.12.2009 18:05
Szen
Аватар участника Szen
Gambit, дайте ссылку на страницу. Я посмотрю.
ПрофильWWW
№ 3Понедельник, 14.12.2009 22:55
Gambit
Аватар участника Gambit
слайдер новостей поставил в правый блок сверху..
сайт тестовый - ссылку добавил в профиль..
(решил тут не делать рекламы..)
ПрофильWWW
№ 4Понедельник, 14.12.2009 23:28
Szen
Аватар участника Szen
Gambit, поставьте скрипт после тега BODY.
Дело в том, что файл u.js (он содержит jquery) подключается перед закрывающим тегом /HEAD. А по порядку, у вас вначале скрипт, а потом подключается jQuery. Должно быть наоборот.
ПрофильWWW
№ 5Вторник, 15.12.2009 00:17
Gambit
Аватар участника Gambit
действительно причина была в этом..
Szen, спасибо огромное..
ПрофильWWW
№ 6Вторник, 15.12.2009 17:50
Gambit
Аватар участника Gambit
Szen, при тестировании скрипта обнаружилось, что при ручном перелистывании "предыдущий" возникает искажение при отображении - несколько страниц отображаются одновременно..
то есть в блок выводиться сразу две новости..
если продолжать перелистывать назад, начинает отображаться одновременно уже три новости..
у вас в примере на странице та же ситуация..
возможно ли как то это исправить или придется подстраиваться под данный баг*?..)
ПрофильWWW
№ 7Вторник, 15.12.2009 18:57
Szen
Аватар участника Szen
Gambit, будем исправлять. Скрипт сложный, мог что-нибудь недочесть. smile
ps: спасибо за обнаружение очепятки!
ПрофильWWW
№ 8Вторник, 15.12.2009 19:44
Szen
Аватар участника Szen
Gambit, основной скрипт немного подправил. Можете тестировать. Будут вопросы - добро пожаловать!
ПрофильWWW
№ 9Вторник, 15.12.2009 21:59
Gambit
Аватар участника Gambit
к сожалению полностью избавиться от искажения не вышло..
с определённой закономерностью показывается две новости одновременно..
и снова все отображается правильно..
закономерность заключается что баг* проявляется при определённом количестве переходов назад..
если новостей 3 - то нужно примерно 6 переходов..
если 4 - 8 и т. д.
т.е. количество новостей умножаем на два..
не знаю поможет ли данная закономерность в решении проблемы, но все же решил поделиться..
ПрофильWWW
№ 10Пятница, 25.12.2009 13:58
Szen
Аватар участника Szen
Gambit, любая закономерность в ошибках, тем более, постоянная, является прямым доказательством неправильного функционирования программы или скрипта. Спасибо за определение этой закономерности. Будем искать метод решения этой проблемы.
ПрофильWWW
Учавствовать в обсуждении "Слайдер новостей на основе jQuery" могут только зарегистрированные пользователи.
Реклама
Интересное
Загрузка...
День рождения
Поздравляем с днем рождения следующих друзей:
kola_haker(16), angel_neo(26), NVKirillof(39), alnika(32).
Желаем им счастья, здоровья, благополучия, любви и богатства!

С уважением, администрация сайта.
Holiday
Статистика
Valid HTML 4.01 Transitional

Онлайн всего: 62
Гостей: 62
Пользователей: 0
Кнопка портала
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Софт
Заработок
Интересное
Загрузка...
Опрос
Ваша оценка дизайна
Всего ответов: 360
Друзья портала
© 2009, SzenProgs
Администратор и дизайнер портала: Szen
Хостинг от uCoz