Ротатор баннеров с плавной прокруткой
http://sf.uploads.ru/OZ1eM.gif
http://se.uploads.ru/1UmgO.gif

Автор: kolobdur74
Платформа: любая

Стиль:

Код:
    <!-- Стиль Ротатора Банеров  -->
    <link rel="stylesheet" type="text/css" href="http://forumfiles.ru/files/0013/de/77/33704.css">
    <!-- END. Стиль Ротатора Банеров  -->

Код ротатора:

Код:
    <!-- Ротатор Банеров  -->
    <!-- Верхняя реклама  -->
    <div id="Mybanners" style="display: none">
    <ul>
    <li class="show"><a href="Ссылка перехода по клику" target="_blank" ><img src="Ссылка на картинку банера"></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><img src="Ссылка на картинку банера"></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><span style="color: #333333;text-shadow: #333333 1px 1px 10px;font: normal small-caps 24px/28px fantasy;letter-spacing:1px;">Вы еще не заказали рекламу?</span></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><span style="color: #333333;text-shadow: #333333 1px 1px 10px;font: normal small-caps 24px/28px fantasy;letter-spacing:1px;">Мы ждем вас на форуме!</span></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><span style="color: #333333;text-shadow: #333333 1px 1px 10px;font: normal small-caps 24px/28px fantasy;letter-spacing:1px;">Здесь может быть ваша реклама</span></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><img src="Ссылка на картинку банера"></a></li>
    </ul>
    </div>
    <!-- END. Верхняя реклама  -->
     
    <!-- Нижняя реклама  -->
    <div id="Mybanners2" style="display: none">
    <ul>
    <li class="show2"><a href="Ссылка перехода по клику" target="_blank" ><img src="Ссылка на картинку банера"></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><span style="color: #333333;text-shadow: #333333 1px 1px 10px;font: normal small-caps 24px/28px fantasy;letter-spacing:1px;">У нас вы найдете Софт для заработка</span></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><span style="color: #333333;text-shadow: #333333 1px 1px 10px;font: normal small-caps 24px/28px fantasy;letter-spacing:1px;">Приглашаем вас на форум!</span></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><span style="color: #333333;text-shadow: #333333 1px 1px 10px;font: normal small-caps 24px/28px fantasy;letter-spacing:1px;">Ваша реклама</span></a></li>
    <li><a href="Ссылка перехода по клику" target="_blank" ><img src="Ссылка на картинку банера"></a></li>
    </ul>
    </div>
    <!--//End Ротатор Банеров  -->


скрипт ротатора

<script>
// Ротатор баннеров

$('#pun-index #pun-crumbs1 p.container').append('<span style="width:100%"><center><div id="bns001" style="position:relative;width:40%;"><!-- Ротатор Банеров верх --></div></center></span>');
$('#pun-index #html-footer .container').append('<span style="width:100%"><center><div id="bns002" style="position:relative;width:40%;"><!-- Ротатор Банеров низ --></div></center></span>');
$("#Mybanners ul").clone(true).appendTo("#bns001");
$("#Mybanners2 ul").clone(true).appendTo("#bns002");
function theRotator() {
// Устанавливаем прозрачность всех картинок в 0
$('div#bns001 ul li').css({opacity: 0.0});

// Берем первую картинку и показываем ее (по пути включаем полную видимость)
$('div#bns001 ul li:first').css({opacity: 1.0});
   
// Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
setInterval('rotate()',15000);
}

function rotate() {
// Берем первую картинку
var current = ($('div#bns001 ul li.show')?  $('div#bns001 ul li.show') : $('div#bns001 ul li:first'));
// Берем следующую картинку, когда дойдем до последней начинаем с начала
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#bns001 ul li:first') :current.next()) : $('div#bns001 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');
};

function theRotator2() {
// Устанавливаем прозрачность всех картинок в 0
$('div#bns002 ul li').css({opacity: 0.0});

// Берем первую картинку и показываем ее (по пути включаем полную видимость)
$('div#bns002 ul li:first').css({opacity: 1.0});
   
// Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
setInterval('rotate2()',15000);
}

function rotate2() {
// Берем первую картинку
    var current2 = ($('div#bns002 ul li.show2')?  $('div#bns002 ul li.show2') : $('div#bns002 ul li:first'));
// Берем следующую картинку, когда дойдем до последней начинаем с начала
    var next2 = ((current2.next().length) ? ((current2.next().hasClass('show2')) ? $('div#bns002 ul li:first') :current2.next()) : $('div#bns002 ul li:first'));

// Расскомментируйте, чтобы показвать картинки в случайном порядке
var sibs2 = current2.siblings();
var rndNum2 = Math.floor(Math.random() * sibs2.length );
var next2 = $( sibs2[ rndNum2 ] );

// Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
next2.css({opacity: 0.0}).addClass('show2').animate({opacity: 1.0}, 1000);

// Прячем текущую картинку
current2.animate({opacity: 0.0}, 1000).removeClass('show2');
};

$(document).ready(function() {   
// Запускаем слайдшоу
theRotator();
theRotator2();
});
</script>

Красное - селектор элементов, после которых вставляются контейнеры с баннерами
Синее - время пролистывания ротатора