Прокрутка баненров, слайдер изображений

Так как многие старые браузеры не поддерживают тег <marquee>, а людям лень обновлять браузер или они считают, что сидеть на старой версии куда комфортнее чем на новой то будем решать этот вопрос.

Итак я не буду Вам рассказывать что такое прокрутка и как она работает. Я Вам расскажу как сделать более интересный эффект с растворением и проявлением. Для этого нам потребуется немного CSS, немного JS и много виджетов.

Итак часть первая.
Идем в каскадную таблицу стилей и ставим туда вот такой код

Код:


div#rotator {
    height:260px;
}
div#rotator ul li {
    float:right;
    position:absolute;
    list-style: none;
}
div#rotator ul li.show {
    z-index:500;
    border-radius: 9px;
}


Тут мы выставляем высоту блока.
height:260px - высота в моем случае 260 пикселей

С таблицей стилей разобрались быстро.
Теперь идем в шаблоны (у меня стоит в нижней части, но можете поставить в верхнюю часть перед закрывающим [/head](скобочки с <> я заменил на []) Если будете ставить в нижнюю часть то ставьте перед закрывающим тегом /body)
Сам код который мы будем вставлять очень прост для понимающих и легко понимаем для не знающих.

Код:


<script>
function theRotator() {
   // Устанавливаем прозрачность всех картинок в 0
   $('div#rotator ul li').css({opacity: 0.0});
 
   // Берем первую картинку и показываем ее (по пути включаем полную видимость)
   $('div#rotator ul li:first').css({opacity: 1.0});
 
   // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
   setInterval('rotate()',3000);
}
 
function rotate() {   
   // Берем первую картинку
   var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));
 
   // Берем следующую картинку, когда дойдем до последней начинаем с начала
   var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));   
 
   // Расскомментируйте, чтобы показвать картинки в случайном порядке
   // var sibs = current.siblings();
   // var rndNum = Math.floor(Math.random() * sibs.length );
   // var next = $( sibs[ rndNum ] );
 
   // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
   next.css({opacity: 0.0})
   .addClass('show')
   .animate({opacity: 1.0}, 1000);
 
   // Прячем текущую картинку
   current.animate({opacity: 0.0}, 1000)
   .removeClass('show');
};
 
$(document).ready(function() {      
   // Запускаем слайдшоу
   theRotator();
});
</script>


Именно в данном примере стоит показ 3 секунды (в самом верху цифра 3000), если надо больше то ставите больше. Так как у меня место заняло это много я сократил скрипт залив его на хостинг и получил вот такой пример с задержкой в 3 секунды

Код:

<script src="http://dvscr.ru/team.js"></script>

С поэзией непонятностей мы закончили. Теперь надо сотворить самое приятное во всем этом царстве красоты и плавности.
Создаем виджет и ставим в него вот такой код

Код:


<div id="rotator">
  <ul>
    <li class="show">Картинка или ссылка 1</li>
    <li>Картинка или ссылка 2</li>
    <li>Картинка или ссылка 3</li>
    <li>Картинка или ссылка 4</li>
    <li>Картинка или ссылка 5</li>
    <li>Картинка или ссылка 6</li>
    <li>Картинка или ссылка 7</li>
    <li>Картинка или ссылка 8</li>
      </ul>
</div>


У меня на тестовом форуме таким образом реализован виджет с баннерами.
В нем я заменял Картинка или ссылка 1 на коды 8 баннеров после чего ставил следующий блок. Таким образом у меня получалось что показываются 8 баннеров, плавно растворяются и показываются следующие 8 баннеров. Все очень плавно и красиво. При желании можно сделать эффект прозрачности. Кому нужен будет пример пишите в личку, дам ссылку.