Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Галерея изображений с плавно меняющимися картинками

Автор: Андрей Краснокутский

Дата: 2011-10-09

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

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

Если изображения не видно, обновите страницу

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

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

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

Листинг 1.

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.cross-slide.js"></script>
<script type="text/javascript">
$(function() {
$('#test1').crossSlide({
sleep: 2,

fade: 1
}, [
{ src: 'images/01.jpg' },
{ src: 'images/02.jpg' },
{ src: 'images/03.jpg' },
{ src: 'images/04.jpg' }
]);

});

</script>

<style type="text/css">
#test1 {
margin: 1em auto;
border: 2px solid #6699CC;
width: 380px;
height: 360px;
}
</style>

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

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

Время смены картинок задается в секундах, параметром:sleep: 2В данном случае установлено время смены картинок - 2 секунды.

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

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

Листинг 2.

<div align="center" id="test1">Если изображения не видно, обновите страницу</div >

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

 

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

Что такое jQuery, как работает и что может jQuery.

Как сделать плавное увеличение картинки при клике.

Как практически зарегистрировать Доменное Имя.

Как заработать на Бирже Статей.

Невидимые блоки на сайте.

Как самому сделать сайт. Обучающий видео курс.

 

Просмотров: 45315


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


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

Комментарии добавил(а): Евгений
Дата: 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, пути все прописаны верно) в чем может быть причина?

Комментарии добавил(а): Юрий
Дата: 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

Огромнейшее спасибо за урок! Все получилось :) Единственное "но" - у меня (как и, смотрю, у многих других), скрипт не "схватывается" браузером Internet Explorer. А в Мозилле, Гугл Хром и Опере все отлично.

Комментарии добавил(а): АндрейК
Дата: 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

Я пользуюсь этим скриптом, очень нравится) Если фото не "воспроизводятся", посмотрите как в коде записан путь к фото, будьте внимательны к расширениям. "jpg" и "JPG" - разные. Я хотел бы узнать, можно ли "воспроизводить" картинки не по порядку, а рандомно. Заранее спасибо!

Комментарии добавил(а): Марина
Дата: 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

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

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

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Заработай в Интернете
и осуществи свою МЕЧТУ
"Как?"
Узнать сейчас >>>


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

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT