Как сделать смену картинок при наведении (jQuery)

Гиф анимация есть? А если найду?) В этом небольшом уроке мы рассмотрим как создать эффект быстрой смены картинок при помощи jQuery, задав свое время задержки на смену картинки, а двигаться она будет только при наведении курсора на изображение.

Как менять изображения при наведении jQuery

Конечно, этот код можно переписать просто «чтобы запускался при старте страницы» а не для события onhover (или при наведении). Я не знаю какие у вас цели, только не переусердствуйте с анимацией. Наш HTML:

в тег img мы записываем атрибут data и перечисляем пути к картинкам через запятую, класс для этого тега js-hover — он нам потом понадобится.

Наш javascript код, точнее jQuery 🙂

Часть этого кода нашел на просторах интернета, и чуть улучшил под себя. 750 — значение миллисекунд до смены картинки. В принципе, это единственный параметр который вам тут нужно менять. Не забывайте помещать скрипты в самый низ страницы, но если вы вдруг хотите запихнуть его в head, то не забывайте писать document ready:

Особенно полезно, если картинок много, но если их всего 2, можно сделать простейшие действия в самом теге. Сразу скажу, это не самый лучший вариант записи такого кода, но для ленивых 🙂 вполне имеет место быть:

Хороший вариант, если у вас 2 картинки, цветная и серая. Но опять же — не поленитесь переписать это все под какую-то hover функцию, которая берет данные из атрибута data или data-image или data-src (любые data- названия атрибутов считаются валидными).

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru.

- Создание сайтов на 1С-Битрикс любой сложности - Вёрстка макетов Figma, Photoshop, Zeplin - Поддержка проектов на Битриксе - Разработка нового функционала для сайта - Парсинг данных - Выгрузка \ Загрузка файлов в формате XML, YML, XLS, XLSX, CSV, JSON - Интеграция по API со сторонними сервисами и многое другое

• Битрикс — Как построить навигацию для разделов и подразделов 6742
• Битрикс — как добавить кнопку на странице пользователя 836
• Как в битриксе сделать автоматическую переиндексацию 8245

12 комментария

Нахожусь в поисках решения проблемы, в которой при загрузки страницы, бывает так, что картинка не загружается и в исходном коде src=»» пусто. Непонятно почему так происходит, но происходит. Может просто следует кеш включить на сайте. Скрипты вынес все в шапку. Думал этот вариант будет работать без перебоев, но нет, временами картинка не подгружается, хотя и скорость

99мбит на speed тесте…. Всё же взял это скрипт из за класса, иначе все картинки, которые надо, или не надо ищут data src…

Если я вас правильно понял, то вы можете просто проверять в самом скрипте на наличие атрибута src у изображения, и только потом выполнять скрипт: $(‘.js-hover’).hover(function() >);

Он работает полностью. Просто когда резко наводишь курсор мышки на картинку, в момент когда страница толком еще не загрузилась, выскакивают пустые окошки вместо картинок, нажимаю проинспектировать элемент выдаёт в адресе null именно в src src=»http://сайт.net/null» остальные в data все ок, и при удержания курсора он начинает листать кадры, конечно пропуская первую. Думал может глюк в опере, в ie такая же проблема. Скрипты вынес все вниз, что бы тело быстрее грузилось, но нет эффекта. А есть может другой вариант этой реализации? Как можно сформулировать запрос в поиск?

А у вас картинки на вашем сервере находятся? Не проверял как с внешними файлами ведет себя скрипт. Опера, насколько знаю, сейчас использует тот же вебкит движок что и гугл хром, там должно все нормально работать. Ну а ИЕ это вообще другая история :). Другой реализации нет, а поискать бы советовал на англоязычных источниках или stackoverflow — возможно там вы найдете какие-то «jquery on hover function», «jquery animation on hover» или что-то вроде этого

У меня две оперы, старенькая удобная, проинспектировать что либо, править исходный код, и новая) Картинки на моём хранятся, всего 5 штук получается в среднем каждая 100кб, это 500кб на одном слайде, а слайдов (картинок с меняющими кадрами) на страницах по 20 — 40. Но по идеи 1 картинка должна тут же грузится при наведении, а тут как будто (моё мнение) скрипт начинает раньше времени листать кадры вперёд, даже не успев загрузить первую, в настройках скорость стоит 700. То есть получается при мгновенном наведении курсора на картинку скрипт по умолчанию тут же отправляет некий запрос не успев дать загрузиться основному html. Может такое быть ?

а можно ссылку? мне так будет легче понять проблему

Спасибо, долго искаль подобное решение, но подскажите как сделать смену картинок плавной, может быть с какими-нибудь эффектами

К сожалению в данном варианте не очень удобно будет применять какую-то анимацию, т.к. тег img остается на месте, а мы меняем только значение его атрибута src, отвечающий за путь к картинке. Большинство вариантов анимации связано с скрытием, появлением, или же изменение размеров элемента. Как мне кажется, для анимации нужно менять и HTML и немного править скрипт, причем важно чтобы анимация не прерывалась т.к. это наведение. Увы у меня нет под рукой готового решения, так бы я вам его скинул 🙂

В любом случае — спасибо, но к скрипту есть претензии у валидатора «Error: Attribute data not allowed on element img at this point.». Я понимаю, что валидатор — нытик, но все же что-то пошло не так, надеюсь это не критично

А попробуйте добавить через дефис что-то еще, например data-images, и в скрипте не забудьте поменять. Насколько я помню, валидатор такие атрибуты за ошибку считать не будет 🙂

Да, вы абсолютно правы, спасибо:)

Dmitriy 26.02.2016 в 17:43 а можно ссылку? мне так будет легче понять проблему . . . К сожалению наверно нельзя) Сайт с неприличным содержанием на тему 18… Могу скинуть на почту, если у вас более менее либеральные взгляды на всемирную паутину))