VDS за 300р от нашего партнера SpaceWeb
[2]
10 Фев 2012, 15:44

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

Здравствуйте.
У меня следующий вопрос.
Нашел следующий пример http://ruseller.com/lessons/les236/example/index.html. Здесь при наведении курсора картинка1, с помощью FadeTo, плавно меняется в картинку2.
Подскажите, как можно сделать, чтобы картинка1 плавно переходила в картинку2, а картинка2 — в картинку3? Если убрать курсор, то картинка3 плавно переходила в картинку1.
И еще, можно ли сделать тет же самый алгоритм, но при наведении курсора плавная смена 3-х картинок была бы зациклина до тех пор, пока не убрали курсор?
Если это можно реализовать, то подскажите, как или дайте ссылку на подробный мануал.
Спасибо

#javascript

Комментарии (4)
bill 10.02.2012 16:21

Плавная смена изображений может осуществляются за счёт плавного изменения прозрачности этих изображений.

Изображения должны находится друг под другом. Никогда не видел готовых примеров. Вообще реализация зависит от нужд.

Используйте изменение CSS свойства opacity.

Можно обойтись без JS. Если использовать только CSS3. Например в CSS3 есть анимация.
+1
grom 10.02.2012 16:28

Есть отличный http://wmdn.ru/javascript/smooth-changing-rotate-images-script-on-jquery/.

Остается сделать, что бы смена изображений запускалась по событию onmouseup и останавливалось по событию onmousedown.
+1
shurik330 10.02.2012 16:28

Да, принцип понятен. Но как сделать с тремя картинками нет никаких идей.
+2
grom 10.02.2012 16:38

Кстати вот ещё http://tympanus.net/Tutorials/HoverSlideEffect/. Достаточно только установить там setInterval и всё.
+1

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

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Найди ответ на любой вопрос по Веб-разработке!
задать вопрос...
Вы можете разместить Рекламный пост самостоятельно, либо отправив контент по адресу admin@webonrails.ru→ Оплата здесь ←Неоплаченные посты удаляются.
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 21783]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 15955]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 12954]
[125]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 9984]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 9867]
[315]
11 Авг 2011, 00:21
Спецификация HTML5 от W3C
[просмотров 7413]
[50]
31 Дек 2011, 14:57
Cron запускать раз в неделю
[просмотров 6564]

Вести с Хабра