Главная » Эффекты для сайта » Cкрипт плавной смены картинок на JQuery

Cкрипт плавной смены картинок на JQuery

2016-04-26 / Вр:22:59 / просмотров: 7907

Всем привет!
Недавно меня попросили в шапке сайта сделать смену изображений.
Можно было бы обойтись использованием GIF или Flash-анимации, но это не вариант, так как заказчики любят часто менять свои планы и мне бы пришлось переделывать GIF или Flash-анимацию очень часто.
Так вот, сегодня в статье я выложу готовый код на JQuery для плавной смены картинок.

Да уж, какая-то маленькая статья у меня получилась. Не знаю, понравиться ли она поисковикам?
Не важно.
Итак, прежде чем заполучить код плавной смены картинок, рекомендую посмотреть демонстрацию эффекта:

[посмотреть демонстрацию]

Как вам?
Теперь сам код.

В CSS:

div#rotator {position:relative; }
div#rotator ul {margin: 0; }
div#rotator ul li { position:absolute; list-style: none;}
div#rotator ul li.show {z-index:-1;}

В HTML перед тегом </head>:

<script ENGINE="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<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 для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
setInterval('rotate()',5000);
}

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'));

// Подключаем эффект растворения/затухания для показа картинок, 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>

В HTML перед тегом </body> в том месте, где нужно поместить картинки с плавным эффектом:

<div id="rotator">
<ul>
<li class="show"><a href="http://google.ru/"><img src="/wp-content/uploads/2016/03/tesla.jpg" /></a></li>
<li><a href="/"><img src="/wp-content/uploads/2016/03/hyperloop.jpg" /></a></li>
<li><a href="http://Stepkinblog.ru/"><img src="/wp-content/uploads/2016/03/Paypal.jpg" /></a></li>
</ul>
</div>

Чтобы показать картинки в случайном порядке, замените javascript на вот этот:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<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 для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
setInterval('rotate()',5000);
}

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>

Если вы знаете способ легче, пишите и делитесь кодом в комментариях. Только не забудьте код вставлять между