BloGGood.ru

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

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

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

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

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

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

Всем привет!
Недавно меня попросили в шапке сайта сделать смену изображений.
Можно было бы обойтись использованием 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="https://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="https://google.ru/"><img src="https://bloggood.ru/wp-content/uploads/2016/03/tesla.jpg" /></a></li>
<li><a href="https://bloggood.ru/"><img src="https://bloggood.ru/wp-content/uploads/2016/03/hyperloop.jpg" /></a></li>
<li><a href="https://Stepkinblog.ru/"><img src="https://bloggood.ru/wp-content/uploads/2016/03/Paypal.jpg" /></a></li>
</ul>
</div>

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

<script type="text/javascript" src="https://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

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

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

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

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

  1. Дмитрий

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

  2. inna

    Попробую.

  3. Виктор

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

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

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

  5. Максим

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

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

    :arrow:

  7. Андрей

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

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

    Пожалуйста!

  9. Sorokin Vladimir

    Здравствуйте! А как вместо картинок сделать тексты, объявления, к примеру?

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

    Здравствуйте!
    А Вы пробовали вместо картинок прописать текст?

    <div id="rotator">
    <ul>
    <li class="show">bloggood.ru</li>
    <li>stepkinblog.ru</li>
    <li>Type o Negative</li>
    </ul>
    </div>
    
  11. Sorokin Vladimir

    Пробовал по другому – не получалось, я ведь не совсем “копенгаген” в этой теме…
    Попробовал как Вы советете – всё ОК!
    Работает отлично, подогнать стили и будет красота, спаибо!

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

;-) :| :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]

Метки: , , , ,

Мои цели на 2018-2019:

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

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

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

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

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

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

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

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573