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

Доброго времени суток, друзья. Для показа на блоге новостей или важных объявлений хорошо подойдёт самый простой слайдер. Использовать его можно под любые нужды. Будь то распорядок дня, расписание, напоминания или просто цитаты.

Я уже делилась несколькими вариантами подобных новостных слайдеров. Если вы пропустили, то можно прочитать как установить красивый блок для объявлений  или блок отображения важных сообщений.

Код этого слайдера вставляется в гаджет HTML/JavaScript и вы можете расположить его в любом месте вашего блога. Посмотрите на тестовом блоге вверху сайдбара.

Демонстрация

Теперь сам скрипт слайдера

<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>

Параметр ScrollDelay скрипта слайдера определяет время, в течении которого одна новость будет отображаться в блоке, scrollSpeed отвечает за скорость смены новостей в слайдере. Я их отметила красным цветом.

"slow" - медленно
"normal" - стандартно
"fast" - быстро

Сейчас HTML код для оформления блока, где будет находиться сам текст.

<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>

Можно убрать из кода навигацию предыдущий/следующий. Отмечено синим цветом. Вместо текста можно вставить и картинки.

<div class="scrollItem"><img src="адрес картинки " alt="название" />
</div>

Ну и осталось прописать стили для всего блока. Можете поиграться и оформить на свой вкус.

<style type="text/css">
  .scrollNavi,.scrollBlock{width:250px;} /* - ширина блока - */
  .scrollBlock{height:100px;border:2px solid #607B8B;} /* - цвет и размер рамки - */
  .scrollBlock .scrollItem{display:none;}
  .scrollNavi{text-align:left;}
  .scrollItem{text-align:center;font-size:13px;color:#A52A2A;} /* - размер и цвет текста. - */
</style>

Подготовили коды в блокноте и устанавливайте их один за другим в гаджет.

Всем спасибо за внимание и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email