24/08/15 Открыта запись на обучение вёрстки для майбба - ссылка на тему

Избранные уроки Photoshop


Вверх
Вниз

COLOR MATE

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » COLOR MATE » Каталог CSS|JS » Скрипт "Плавная замена картинок с помощью JQuery"


Скрипт "Плавная замена картинок с помощью JQuery"

Сообщений 1 страница 2 из 2

1

Скрипт "Плавная замена картинок с помощью 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;}

в верхней части кода.
Источник

+1

2

переделал пример http://alwow.ru/pages/skript

0


Вы здесь » COLOR MATE » Каталог CSS|JS » Скрипт "Плавная замена картинок с помощью JQuery"