Скрипт "Плавная замена картинок с помощью JQuery"
Скрипт "Плавная замена картинок с помощью JQuery"
Приемушества данного способа размещения ваших изображений, которые кстати кликабельные и могут перенаправляют на разные адреса, в отличие от простой GIF анимации, своего рода аналог флэш анимации, которую как известно нельзя реализовать на таких сервисах бесплатных форумов как mybb.ru
Выкладываю как есть, контейнер с картинками и ссылками находится в последней части кода, меняете на своё.
Работу скрипта Вы можете увидить ЗДЕСЬ (Центральный баннер в объявлении.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Простая замена картинок с помощью JQuery</title> <style type="text/css"> div#rotator li img{border:2px solid #8112F3;position:absolute;left:50%;height:90px!important;width:351px;margin-top:-48px;margin-left: -178px;} div#rotator ul li {float:left; position:absolute; list-style: none;} div#rotator ul li.show {z-index:500;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><!-- Автор Dylan Wagstaff & WebMage http://www.alohatechsupport.net --> <script type="text/javascript"> function theRotator() { // Устанавливаем прозрачность всех картинок в 0 $('div#rotator ul li').css({opacity: 0.0}); // Берем первую картинку и показываем ее (по пути включаем полную видимость) $('div#rotator ul li:first').css({opacity: 1.0}); // Вызываем функцию rotate для запуска слайдшоу, 6000 = смена картинок происходит раз в 7 секунд setInterval('rotate()',6000); } 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> <div id="rotator"> <ul> <li class="show"><a href="http://krasnet.mybb.ru/"><img src="https://forumupload.ru/uploads/0005/27/73/3887-1-f.jpg" alt="pic1" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/viewtopic.php?id=714" target="_blank"><img src="https://forumupload.ru/uploads/0005/27/73/3948-1.png" alt="pic3" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/"><img src="https://forumupload.ru/uploads/0005/27/73/3888-4-f.jpg" alt="pic2" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/pages/chat_foruma" target="_blank"><img src="https://forumupload.ru/uploads/0005/27/73/4029-1.png" alt="pic3" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/"><img src="https://forumupload.ru/uploads/0005/27/73/3889-2-f.jpg" alt="pic3" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/viewforum.php?id=82" target="_blank"><img src="https://forumupload.ru/uploads/0005/27/73/4022-2.png" alt="pic3" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/"><img src="https://forumupload.ru/uploads/0005/27/73/3890-1-f.jpg" alt="pic3" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/"><img src="https://forumupload.ru/uploads/0005/27/73/2125-1-f.png" alt="pic3" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/"><img src="https://forumupload.ru/uploads/0005/27/73/3889-5-f.jpg" alt="pic3" height="90" width="350"></a></li> <li><a href="http://krasnet.mybb.ru/"><img src="https://forumupload.ru/uploads/0005/27/73/2125-1-f.png" alt="pic3" height="90" width="350"></a></li> </ul> </div>
Позиция настраевается следующими параметрами
width:351px;margin-top:-48px;margin-left: -178px;}
в верхней части кода.