BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Всем привет!
Недавно меня попросили в шапке сайта сделать смену изображений.
Можно было бы обойтись использованием 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 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'));

// Подключаем эффект растворения/затухания для показа картинок, 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="http://bloggood.ru/wp-content/uploads/2016/03/tesla.jpg" /></a></li>
<li><a href="http://bloggood.ru/"><img src="http://bloggood.ru/wp-content/uploads/2016/03/hyperloop.jpg" /></a></li>
<li><a href="http://Stepkinblog.ru/"><img src="http://bloggood.ru/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>

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

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Дмитрий

    Ого. Классная вещь. Код я себе сохраню) А уж применение этому я найду. Спасибо!

    Ответить

  2. inna

    Попробую.

    Ответить

  3. Виктор

    Здравствуйте!
    Спасибо за скрипт.
    Установил, работает все, кроме ссылок. Отсылает только по ссылке последней картинки (а их 12) Пришлось ссылки пока удалить. Не подскажите, в чем причина?
    С уважением, Виктор.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте!
    Причину сказать не могу, так как не вижу, как вы прописали ссылки к картинкам.

    Ответить

  4. Максим

    Классно все получилось и ссылка на изображениях работает!! Просто Супер!!!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    :arrow:

    Ответить

  5. Андрей

    Спасибо! Все просто и работает.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста!

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 729
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3977