Как сделать сменяющиеся фотографии

Как создать

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

Сегодня мы разберемся как с помощью jQuery сделать галерею изображений с плавно сменяющими друг друга картинками. Пример работы такой галереи Вы видите ниже:

Скачайте и распакуйте архив с библиотекой и плагином jquery.cross-slide.js. Положите файлы: библиотеки и плагина в корневую папку или в любую другую, но не забудьте правильно прописать путь до этих файлов. Давайте будем считать, что эти файлы мы положили в корень сайта.

Между тегами и прописываем код код Листинга 1:

Листинг 1.

Плагин не очень привередлив и будет работать даже если Вы пропишите этот код и в теле web-страницы.

Конечно же Вам понадобятся и сами изображения, которые будут сменять друг друга. В данном случае я использую 4 картинки: 01.jpg, 02.jpg, 03.jpg, 04.jpg, которые лежат в папке images. Размеры моих картинок 380х360 пикселей. Количество картинок конечно же можно увеличить.

Ниже, в Листинге 1, прописан стиль оформления, в данном случае это сплошная рамка толщиной в 2 пикселя. Естественно Вы можете этот стиль изменить под свои требования.

В том месте web-страницы где Вы хотите вывести галерею сменяющихся картинкок, прописываем код Листинга 2:

Листинг 2.

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

Читайте так же другие наши материалы.

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Евгений
Дата: 2011-10-09

Андрей, здравствуйте. Спасибо вам за такие полезные уроки. Все, что вы мне присылаете внимательно читаю и еще ни одна рассылка не была бесполезна.А насчет этого урока. Вы как раз подгадали. Задумал блог на одну тему и как раз такая галерея будет кстати, только у меня просьба. можно я использую эти ваши картинки? Заранее благодарен!

Комментарии добавил(а): Николай Гижицкий
Дата: 2011-10-10

Очень полезный и нужный урок! Спасибо, Андрей!

Комментарии добавил(а): Константин
Дата: 2011-10-10

Спасибо, Андрей! Урок как нельзя кстати. Совсем недавно задумался о такой возможно на сайте.

Комментарии добавил(а): Mila
Дата: 2011-10-10

Комментарии добавил(а): ivanck
Дата: 2011-10-10

отличнызуй урок.Вот только бы скачать их сразу все.а то бывает неуспеваю

Комментарии добавил(а): ivanck
Дата: 2011-10-10

отличнызуй урок.Вот только бы скачать их сразу все.а то бывает неуспеваю

Комментарии добавил(а): Алик
Дата: 2011-10-10

Спасибо огромное, отличный урок

Комментарии добавил(а): Ольга Алексеевна Жихарева
Дата: 2011-10-11

Читайте также:  Как сделать ремонт по честному

Мне Ваши рассылки очень интересны.Вот только можно их устанавливать на блоги в частности на WordPress?Я ещё не продвинутый пользователь и очень много не знаю.Вот бы хорошо если бы Вы организовали бы платные или бесплатные курсы создание сайтов.Из всех предпринимателей мне кажется Вы самый надёжный.Я создала сайт на WordPress,но он очень далёк от совершенства.

Комментарии добавил(а): Сергей
Дата: 2011-10-20

Добрый день! Галерея с плавно меняющимися картинками нормально заработала на сайте, код которого был написан «напрямую» в Блокноте. Почему то она «отказывается» работать на сайте, сделанном на CMS GetSimple. Голубая рамочка присутствует там, где это необходимо, но картинки не демонстрируются. Какая же может быть причина? Путь к картинкам я указываю правильно.

Комментарии добавил(а): Сергей
Дата: 2011-10-20

Добрый день! Галерея с плавно меняющимися картинками нормально заработала на сайте, код которого был написан «напрямую» в Блокноте. Почему то она «отказывается» работать на сайте, сделанном на CMS GetSimple. Голубая рамочка присутствует там, где это необходимо, но картинки не демонстрируются. Какая же может быть причина? Путь к картинкам я указываю правильно. e-mail: hblg@mail.ru

Комментарии добавил(а): Светлана
Дата: 2011-10-23

Комментарии добавил(а): Сергей
Дата: 2011-10-24

Здравствуйте Андрей. Спасибо за урок.Но есть маленькая проблема, скрипт работает в опере но отказываеться работать в эксплорере.Верю что есть решение.

Комментарии добавил(а): Сергей
Дата: 2011-10-24

Здравствуйте Андрей. Спасибо за урок.Но есть маленькая проблема, скрипт работает в опере но отказываеться работать в эксплорере.Верю что есть решение. e-mail:sensej-sensej@yandex.ru

Комментарии добавил(а): Margarita
Дата: 2011-11-14

Может просто сделать, Как на этом сайте http://www.1

Комментарии добавил(а): Olka
Дата: 2011-12-20

Пытаюсь применить скрипт в создании школьного сайта при работе с конструктором на народе (школьный фотоальбом) каритнки не появляются при обновлении страницы. Почему? Адреса фото прописываю верно.olka

Комментарии добавил(а): TV
Дата: 2012-02-09

проблема такая же. картинки не отображаются, только голубая рамочка 🙁

Комментарии добавил(а): АндрейК
Дата: 2012-02-10

TV, могу сказать однозначно: Вы где то допускаете ошибку

Комментарии добавил(а): оля
Дата: 2012-02-12

здраствуйте. Вы не подскажите, по какой причине эти скрипты не работают в эксплоере? Может есть решение.

Комментарии добавил(а): АндрейК
Дата: 2012-02-12

Оля этот скрипт прекрасно работает во всех браузерах, в том числе и в Internet Explorer. Вы где то допускаете ошибку. 🙁

Комментарии добавил(а): Михаил
Дата: 2012-01-29

На Denwere все скрипт работает, на удаленном хостинге почему то не хочет. (движек wordpress, пути все прописаны верно) в чем может быть причина?

Читайте также:  Как сделать сайт в facebook

Комментарии добавил(а): Юрий
Дата: 2012-03-13

Спасибо, все работает отлично, вопрос только один, почему когда я применяю этот урок «Галерея изображений с плавно меняющимися картинками» и ваш урок «Как сделать плавное увеличение картинки при клике» на одной странице сайта плавное увеличение картинки не получается, работает нормально только «Плавно меняющиеся картинки», не получается, чтоб работало все?

Комментарии добавил(а): Снежана
Дата: 2012-05-02

Спасибо, вы решили мою проблему, нд которой я билась весь месяц

Комментарии добавил(а): Габриэл
Дата: 2012-05-26

А можно как то на каждую картинку ссылку проставить? Что бы к примеру при нажатии переходила по ссылке

Комментарии добавил(а): Оксана
Дата: 2012-06-11

Спасибо большое. Всё прекрасно получилось.

Комментарии добавил(а): ira.kuzn.it@rambler.ru
Дата: 2012-06-11

неделю искала эту информацию. огромное спасибо. Супер

Комментарии добавил(а): Drugg
Дата: 2012-07-18

Комментарии добавил(а): Inna
Дата: 2012-10-04

Здравствуйте!Не могу понять куда вставлять эти скрипты.Помогите,а?Надо чтобы шапка сайта менялась

Комментарии добавил(а): АндрейК
Дата: 2012-10-05

На сервисах и конструктарах сайтов типа Юкоз и аналогичных подобные скрипты довольно часто не работают. Администраторы таких сервисов умышленно урезают многие функции. В данном случае Вам лучше обратиться к администратору сервиса Юкоз.

Комментарии добавил(а): Inna
Дата: 2012-10-08

Комментарии добавил(а): Ирина
Дата: 2012-10-22

Здравствуйте. Очень полезный сайт. Но я тоже прошу помощи. Подскажите, по какой причине эти скрипты не работают в эксплорере? e-mail: naumow.irina@yandex.ru

Комментарии добавил(а): Ирина
Дата: 2012-10-15

Здравствуйте, очень красиво все получилось, за Вам огромное спасибо. Только вот если бы не одно НО, на главной странице работает а при переходе на любую другую, не хочет.((( Не подскажите как исправить? Сайт на юкоз. Код уже вставляла, куда только можно))). Работает только на главной. Заранее спасибо.

Комментарии добавил(а): Максим
Дата: 2012-11-08

О! Отлично! Спасибо! В избранное! Попробую сегодня же!

Комментарии добавил(а): Владимир
Дата: 2013-01-02

Прекрасный скрипт! Спасибо! Сайт на Юкозе, скрипт прекрасно работает в Хроме, Опере, Мазиле но ни как не хочет в IE8, IE9 работать. Пожалуйста, подскажете что можно подправить, почему IE не хочет отображать?

Комментарии добавил(а): Александра
Дата: 2013-01-11

Комментарии добавил(а): АндрейК
Дата: 2013-01-13

Александре. Честно говоря я не заметил (специально проверял), чтобы данный скрипт не работал в других браузерах. При тестировании мною проблем не обнаружено. Замечательно работае в том числе и в Internet Explorer.

Читайте также:  Как сделать принт на одежде

Комментарии добавил(а): Александр
Дата: 2013-01-29

Может кто дать такойже скрипт только со стрелками по бокам, на следующию картинку и на придыдущею

Комментарии добавил(а): Алексей
Дата: 2013-02-07

Спасибо, именно то, что искал.

Комментарии добавил(а): Владислав
Дата: 2013-02-13

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

Комментарии добавил(а): Роман
Дата: 2013-02-20

А как ссылку к фото добавить?

Комментарии добавил(а): Татьяна
Дата: 2013-02-28

Здравствуйте! у меня почему-то в слайдшоу сменяются только 2 картинки. и то-один раз,без повторов. Т.е. захаодишь на страничку-появляется картинка1, сменяетс на картинку 2 и все.тишина.

Комментарии добавил(а): Алексей
Дата: 2013-03-18

почему-то не видно картинок?

Комментарии добавил(а): Карен
Дата: 2013-03-31

У меня тоже картинки не появляются что-то.Что я только не делал.

Комментарии добавил(а): Валерий cadet63@list.ru
Дата: 2013-04-08

А можно ли адреса картинок брать из базы данных. На сайте большая галерея и хотелось бы, чтобы превьюшки плавно менялись на главной странице сайта

Комментарии добавил(а): Валерия
Дата: 2013-05-02

Андрей,будьте добры подскажите что ещё может быть за причина..Картинки не листаются,рамка есть и все. Спасибо

Комментарии добавил(а): Ольга
Дата: 2013-05-06

Комментарии добавил(а): Валерия
Дата: 2013-05-08

Ольга как видете,я тоже спросила-а тема видать сдохла давным давно уже.

Комментарии добавил(а): Степан
Дата: 2013-05-16

Комментарии добавил(а): Марина
Дата: 2013-12-18

Подскажите, пожалуйста, а как сделать так, чтобы фотографии показывались random в случайном порядке?

Комментарии добавил(а): Валерий
Дата: 2014-02-06

Все работает нормально и в UCOZе то же. А можно ли как нибудь к этим картинкам прикрутить ссылки?

Комментарии добавил(а): Дмитрий
Дата: 2014-04-14

Спасибо! Очень полезный урок.

Комментарии добавил(а): Татьяна
Дата: 2014-07-01

А можно ли к этим картинкам делать гиперссылки? Есть такой плагин?

Комментарии добавил(а): Sergey
Дата: 2014-07-13

Cлайдер работает нормально

Комментарии добавил(а): Elena
Дата: 2016-03-14

Комментарии добавил(а): Татьяна
Дата: 2016-04-10

Благодарю за великолепное и доступное объяснение! Все работает. Все красиво и корректно!

Комментарии добавил(а): Дмитрий
Дата: 2016-05-17

Комментарии добавил(а): Артем
Дата: 2016-10-11

Здавствуйте! Почему при добавлении более картинок ничего не работает?

Комментарии добавил(а): АндрейК
Дата: 2016-10-11

Артем, объяснение только одно: Вы где то допустили ошибку, картинок можно добавлять сколько угодно

Комментарии добавил(а): Владимир
Дата: 2017-01-07

Комментарии добавил(а): Алексей
Дата: 2018-03-14

Подскажите как картинки сделать ссылками? Спасибо. bogdan.volgograd@yandex.ru

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

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Источник

Оцените статью
Полезные советы и лайфхаки для жизни
Adblock
detector