Среда, 04.03.2026, 22:26
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Июнь » 10 » Меняющийся информационный блок на jQuery
    15:15
    Меняющийся информационный блок на jQuery

    Как всегда, в самом начале необходимо между тегами <head></head> добавить следующий код:

    Code
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       
      var first = 0;
      var speed = 700;
      var pause = 3500;
       
      function removeFirst(){
      first = $('ul#listticker li:first').html();
      $('ul#listticker li:first')
      .animate({opacity: 0}, speed)
      .fadeOut('slow', function() {$(this).remove();});
      addLast(first);
      }
       
      function addLast(first){
      last = '<li style="display:none">'+first+'</li>';
      $('ul#listticker').append(last)
      $('ul#listticker li:last')
      .animate({opacity: 1}, speed)
      .fadeIn('slow')
      }
       
      interval = setInterval(removeFirst, pause);
    });
    </script>

    Далее подключаем стили в документе или же выносим их в отдельный файл:

    Code
    <style type="text/css">
      body{
      font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
      font-size:12px;
      }
      #listticker{
      height:165px;
      width:95%;
      overflow:hidden;
      border:solid 1px #3e96cd;
      padding:6px 10px 14px 10px;;
      }
      #listticker li{
      border:0; margin:0; padding:0; list-style:none;
      }
      #listticker li{
      height:60px;
      padding:5px;
      list-style:none;
      }
      #listticker a{
      color:#000000;
      margin-bottom:
      }
      #listticker .news-title{
      display:block;
      font-weight:bold;
      margin-bottom:4px;
      font-size:11px;
      }
      #listticker .news-text{
      display:block;
      font-size:11px;
      color:#666666;
      }
      #listticker img{
      float:left;
      margin-right:14px;
      padding:4px;
      border:solid 1px #3e96cd;
      }
      </style>

    И после всего этого вставляем все новости в ненумерованый список:

    Code
    <ul id="listticker">
      <li>
      <img src="Cсылка на картинку 1" />
      <a href="Ссылка на сайт" class="news-title">Название сайта</a>
      <span class="news-text">Описания сайта</span>
      </li>
      <li>
      <img src="Cсылка на картинку 2" />
      <a href="Ссылка на сайт" class="news-title">Название сайта</a>
      <span class="news-text">Описания сайта</span>
      </li>
      <li>
      <img src="Cсылка на картинку 3" />
      <a href="Ссылка на сайт" class="news-title">Название сайта</a>
      <span class="news-text">Описания сайта</span>
      </li>
      <li>
      <img src="Cсылка на картинку 4" />
      <a href="Ссылка на сайт" class="news-title">Название сайта</a>
      <span class="news-text">Описания сайта</span>
      </li>
    </ul>

    И самое главное посмотрите на пример , в этом примере вы увидите как банеры будут передвигаться с помощью jQuery!
    А если проще я просто переделал новостной блог под роатор банеров!
    Если вам понравилось ставим +

    Категория: скрипты для ucoz сайта | Просмотров: 673 | Добавил: Simpsonnn | Рейтинг: 0.0/0
    Всего комментариев: 4
    4 dalv0394  
    0
    А как сделать с помощью информера?

    1 dalv0394  
    0
    Далее подключаем стили в документе или же выносим их в отдельный файл:
    Эт как?

    2 Simpsonnn  
    0
    Извеняюсь за оффтоп!
    <style>...Css код...</style> вставляешь между <head> и </head>
    либо в блокноте вставляешь код css без <style>...</style>
    и сохраняешь но не забуть сохранить блокнот с UTF-8 форматом, далее этот файл на пример style.css в корень сайта и выводишь так же между <head> и </head> с помощью этого кода
    Code
    <link rel="stylesheet" type="text/css" href="адрес css файла" />

    3 dalv0394  
    0
    Спасибо! +!

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]