Плавная смена картинок


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

P.s. Можно также посмотреть "Плавная смена картинок в нескольких местах".

В данном примере хочу просто показать один из способов плавной смены двух картинок между собой на jQuery.
Для этого берем две картинки 1.gif, 2.gif и файлик, в котором все это будет происходить show-img.html :).

Рассмотрим show-img.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>jQuery img</title>
<script language="JavaScript1.2" src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

$("#img").click(function () {
var src = $("#img").attr("src");
var tmp = $("#tmp").val();
$("#im").fadeOut("slow", function () {
$("#img").attr("src", tmp);
});
$("#im").fadeIn("slow");
$("#tmp").val(src);
});

});

</script>
</head>

<body>

<p id="im">
<img border="0" src="1.gif" id="img">
<input type="hidden" id="tmp" value="2.gif" >
</p>

</body>
</html>

Первым делом подключаем библиотеку jQuery, строка 06.

При нажатии мышкой на картинку выполняется скрипт с 11 по 19 строку, где сначала в переменную src мы сохраняем имя текущей картинки, строка 12. Затем в переменную tmp сохраняем значение скрытого поля для дальнейшей подстановки в путь картинки, строка 13. После этого делаем прозрачным элемент абзаца с id = "im" функцией fadeOut, строка 14 и меняем атрибут src, то бишь путь картинки с id = "img" на значение, которое хранится в переменной tmp, строка 15. И снова меняем прозрачность элемента с id = "im" функцией fadeIn, строка 17. В строке 18 мы меняем значение скрытого поля на путь к предыдущей картинке. Вот и все, теперь при следующем нажатии все повторяется, и картинки заменяются.

Смотрим пример!

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 11, в среднем: 3.73 из 5)
Loading ... Loading ...


  1. #1 Лимон - Июнь 18th, 2009 at 22:50

    все круто – а как сделать чтобы при наведении мыши фон менялся?
    как событие прописать?

  2. #2 nice - Июнь 19th, 2009 at 10:49

    как вариант менять стиль фона при mouseover.

  3. #3 zlolik - Август 24th, 2009 at 03:13

    $(document).ready(function(){

    $(“#img”).mouseover(function () {
    var src = $(“#img”).attr(“src”);
    var tmp = $(“#tmp”).val();
    $(“#im”).fadeOut(“fast”, function () {
    $(“#img”).attr(“src”, tmp);
    });
    $(“#im”).fadeIn(“fast”);
    $(“#tmp”).val(src);
    });

    $(“#img”).mouseout(function () {
    var src = $(“#img”).attr(“src”);
    var tmp = $(“#tmp”).val();;
    $(“#im”).fadeOut(“slow”, function () {
    $(“#img”).attr(“src”, tmp);
    });
    $(“#im”).fadeIn(“slow”);
    $(“#tmp”).val(src);
    });

    });

  4. #4 mitka_san - Январь 22nd, 2010 at 15:18

    а реально этот скрипт адаптировать так чтоб смена картинок происходила не по нажатию на картинку, а по нажатию на ссылки, которые соответствуют кааждая своей картинке??

  5. #5 nice - Январь 22nd, 2010 at 16:14

    конечно реально.

    вообще для программиста нет ничего нереального ))

  6. #6 Ксения - Март 11th, 2010 at 03:42

    А как прописать,чтоб менялись не две картинки,а допустим 16,друг за дружкой?
    Заранее спасибо за ответ.

  7. #7 Александр - Апрель 12th, 2011 at 21:49

    Крутая штука. вот только работает только с одним элементом. я хотел сделать что бы все картники на страничке могли меняться. а по факту меняется только первая. следующие позиции статичны(

  8. #8 nice - Апрель 12th, 2011 at 22:29

    Александр, можно сделать и с остальными, достаточно под каждую картинку добавить по hiddenу или объявить массив и в него запоминать предыдущую картинку…

  9. #9 nice - Апрель 12th, 2011 at 22:32

    Ксения, прощу прощение за задержку, почему то не заметил…
    Для решения вашей задачи нужно сгенерить массив картинок (точнее путей к ним) и по клику перебирать индексы массива и заменять src картинки как в примере.

  10. #10 fear51 - Май 7th, 2011 at 13:27

    как можно реализовать в этом скрипте чтобы :
    вот у нас 3 картинки, при выборе 1ой менялась она, при выборе 2ой, 1ая менялась в исходное положение а 2ая менялась

  11. #11 Петр - Июль 6th, 2011 at 14:13

    простите а как сделать чтобы картинка менялась не по щелчку а при наведении

  12. #12 nice - Июль 8th, 2011 at 13:44

    вместо $(“#img”).click(function () {
    написать $(“#img”).mouseover(function () {

  13. #13 Петр - Июль 11th, 2011 at 10:45

    Спасибо мудрейший)

  14. #14 Петр - Июль 13th, 2011 at 12:27

    Уважаемый nice подскажите пожалуйста
    как всетаки реализовать это с большим количеством картинок примером. Будьте добры очень нужно)
    имею в виду чтобы добавит по соседству еще таких меняющихся картинок, у меня они в этом случае статичны. То о чем писал выше Александр

  15. #15 Татьяна - Июль 14th, 2011 at 18:35

    “в переменную src мы сохраняем имя текущей картинки”

    извиняюсь, конечно, но может, мы все-таки в переменную src сохраняем путь к картинке? ;)

    спасибо за статью.

  16. #16 nice - Июль 17th, 2011 at 16:52

    Татьяна :

    извиняюсь, конечно, но может, мы все-таки в переменную src сохраняем путь к картинке? ;)

    Татьяна, вы абсолютно правы, я это и имел ввиду!

  17. #17 nice - Июль 17th, 2011 at 17:11

    Петр :

    Уважаемый nice подскажите пожалуйста
    как всетаки реализовать это с большим количеством картинок примером. Будьте добры очень нужно)
    имею в виду чтобы добавит по соседству еще таких меняющихся картинок, у меня они в этом случае статичны. То о чем писал выше Александр

    Скрипт немного нужно переписать, а именно отвязать логику от id элементов которые должны быть всегда уникальными. Чуть позже выложу переписанный скрипт!

  18. #18 Петр - Август 2nd, 2011 at 11:27

    Жду с нетерпением )

  19. #19 nice - Август 16th, 2011 at 21:21

    Немного изменил скрипт, надеюсь кому-то будет полезен!
    http://www.webnotes.com.ua/index.php/archives/829

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.