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

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

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

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

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

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

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

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

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

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года.

Предоставляю услуги по созданию проектов на CMS 1С-Битрикс - сайты, шаблоны и компоненты с нуля.

Другие виды работ:
  • Доработка функционала на уже существующих проектах
  • Вёрстка макетов (HTML, CSS, JavaScript, jQuery, JADE, SASS, Gulp)
  • Скрипты на PHP и JS (jQuery)

Если у вас остались вопросы, свяжитесь со мной любым удобным для вас способом или оставьте комментарий внизу.

E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

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

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

    1. Если я вас правильно понял, то вы можете просто проверять в самом скрипте на наличие атрибута src у изображения, и только потом выполнять скрипт:
      $(‘.js-hover’).hover(function() {
      if (this.src != false) { /*код скрипта*/}
      });

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

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

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

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

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

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

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *