Плавная смена изображений на jQuery
Ранее на нашем сайте уже рассматривались скрипты Автоматической смены изображений и подписей к ним и Плавной смены изображений.
По просьбе посетителей нашего сайта было принято решение о создании скрипта, который совмещал бы в себе все функции рассматриваемых ранее двух скриптов.
Так как в результате реализации на обычном JavaScript код получался довольно длинным, то было принято решение воспользоваться библиотекой jQuery. Это позволило получить довольно компактный и универсальный код, работающий во всех браузерах.
В результате получилась плавная смена изображений, которую Вы можете наблюдать ниже:
Картинка 1
Давай вторую Давай четвертую
Стоп Продолжить
Как Вы видите, изображения и подписи к ним автоматически меняются с интервалом в пять секунд. При этом изображения и подписи плавно появляются и плавно исчезают. Помимо перечисленного присутствуют кнопки "Стоп" и "Продолжить". При необходимости можно добавить кнопки для перехода к нужному изображению.
Для получения на своем сайте точно такого же эффекта слайд-шоу, вам потребуется подключить библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Далее в том месте Вашей странички, где Вы планируете разместить изображения и подписи к ним, которые будут автоматически меняться, добавите следующий код:
<div style="height: 220px; text-align: center;">
<img src="image/img_1.png" alt="" id="slide_show"><br>
<span id="slide_text">Картинка 1</span>
</div>Если необходимо, то Вы можете добавить кнопки для остановки и продолжения смены изображений, а также кнопки перехода к нужному изображению:
<span style="color: blue; cursor: pointer;" onclick="chgImg(2)">Давай вторую</span>
<span style="color: blue; cursor: pointer;" onclick="chgImg(4)">Давай четвертую</span>
<br><br>
<span style="color: blue; cursor: pointer;" onclick="clearInterval(play)">Стоп</span>
<span style="color: blue; cursor: pointer;"
onclick="play=setInterval('chgImg(0)', 5000);">Продолжить</span>В нижней части сайта разместите JavaScript код, который и будет делать всю работу по плавной смене изображений и подписей к ним, а также осуществлять переход к нужному изображению:
<script type="text/javascript">
var imgs = ["image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png"];
var text = ['Картинка 1','<a href="index.php">Картинка 2</a>',
'<b style="color: red;">Картинка 3</b>','Картинка 4'];
var n = 0;
time = 800;
play = setInterval("chgImg(0)", 5000);
function chgImg(number) {
if (number!=0) n = number - 2;
$("#slide_show").fadeOut(time, function() { //для картинок
$(this).attr("src", imgs[n]).fadeIn(time);
});
$("#slide_text").fadeOut(time, function() { //для текста
$(this).html(text[n]).fadeIn(time);
});
n++;
if (n>=imgs.length) n = 0;
}
</script>Как видите, код получился действительно небольшим, но в тоже время красиво осуществляет довольно полезную функцию по плавной смене изображений.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
А можно как то в этом коде изменить сам эффект смены картинки очень хочется пожалуйста?
P.S. И написанием скриптов на заказ мы тоже не занимаемся :)
А в JavaScript код добавьте $(document).ready(function(){$('#slide_show').fadeIn(600)});
<a id="slide_text" href="index.php"><img src="image/img_1.png" alt="" id="slide_show"></a>
В переменную text помещаем ссылки: var text = ["index.php","script.php","trick.php","forum/index.php"];
Ну и меняем обработчик #slide_text на такой:
$('#slide_text').fadeOut(time, function() { $(this).attr({"href":text[n]}).fadeIn(time); });
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<span id="slide_text">Картинка 1</span> <!-- вставьте под изображение -->
<script type="text/javascript">
var text = ['Картинка 1','Картинка 2','<b style="color: red;">Картинка 3</b>','Картинка 4'];
var n = 0;
play = setInterval("chgImg()", 5000);
function chgImg() {
$('#slide_text').fadeOut(800, function() { $(this).html(text[n]).fadeIn(800); });
n++;
if (n>=text.length) n = 0;
}
</script>
play=setInterval("chgImg(0)", 5000); - интервал между сменой картинок и не должен влиять на работоспособность скрипта. 800 - время анимации (угасания, появления).
Если страница включена в меню, скрипт вывода текста выводит картинку первую, затем начинается вывод букв, по одной за раз. Убираю в меню id="selectedCell" который отвечает за окрашивания пункта меню активной страницы, скрипт работает как надо.
Скажите, в чем может быть проблема такого конфликта?
Здесь оставил сокращенный вариант. Ответил тоже на форуме.
1) А можно ли сделать "плеер" Предыдущая Старт/Стоп Следующая как здесь http://usefulscript.ru/slide_show.php
2) Чтобы картинки в случайном порядке воспроизводились.
3) Массив какой-то записывался, чтобы кнопки предыдущая и следующая запоминали и работали корректно хотя бы на 3-5 позиций вперёд-назад?
Может, много хочу? Сам полез разбираться - чуть программировал когда-то - логику понимаю, а с языком - хромаю, потратил два часа - толку маловато.
Было бы очень здорово, если бы появилась возможность:
- задавать ссылки с каждого фото;
- задавать надписи к фото плюс ссылки с них (ссылка для фото и надписей - одна, т.е. как бы карточка: фото + надпись, и одна ссылка с них).
Подписи к картинкам - вообще планировал. Но пока потестирую и без них (и так помогли сильно). Плюс попробую сделать по аналогии с сообщением выше "А как сделать сами изображения ссылками?"
Принцип реализации такой же, как в первом вопросе. У меня на страницу три строки и три столбца изображений. Хотелось бы, чтобы каждая ячейка отображала свои картинки с разным интервалом времени. Как это можно организовать?
P.S. Для конкретно вашего случая ответил в той же теме на форуме.
В результате у Вас должно получиться следующее:
$(document).ready(function(){ play = setInterval("chgImg(0)", 5000); });
А первое изображение показывается дважды, т.к. сначала оно прописано в теге img, а второй раз - уже берется из массива. Просто пропишите в тег img последнее изображение массива.
1-й в head, 2-й в body, 3-й перед /body (это низ сайта?), а то тыкаю их по-разному, и ничего не выходит, появляются кнопки, а изображений нет, соответственно эффектов тоже. IE не грузит, то есть показывает что идет загрузка и на этом все. Лис что-то очень быстро прогружает, появляются кнопки и далее все без движений.
Добавьте кнопку: <input type="button" onclick="play=setInterval('chgImg(0)', 3000);" value="Старт">
Я имел ввиду надпись под картинкой можно выводить так же, как и в одиночном скрипте смены изображений.
Выложил на форуме еще один вариант данного скрипта, но уже с текстом.
Как сделать, чтобы кнопки "следующая картинка" "предыдущая". У вас в коде показать 2 или 4. А как изменить его на -1 или +1 по клику... не дотункал.
Подскажите?
jQuery (document).ready(function($){ }); либо как из jQuery (document).ready(function($){ }); обратиться конкретно к var img? Цель: использовать .each и .push