Как всегда, в самом начале необходимо между тегами <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! А если проще я просто переделал новостной блог под роатор банеров! Если вам понравилось ставим +
|