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

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

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

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

<img class="js-hover" alt="" src="/img/1.jpg" data="/img/2.jpg,/img/3.jpg">

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

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

<script>
//onhover image
$('.js-hover').hover(function() {
	var _this = this,
		images = _this.getAttribute('data').split(','),
		counter = 0;
	this.setAttribute('data-src', this.src);
	_this.timer = setInterval(function() {
		if(counter > images.length) {
			counter = 0;
		}
		if (images[counter] != undefined) {
			_this.src=images[counter];
		} else {
			_this.src=_this.getAttribute('data-src');
		}

		counter++;
	}, 750);

}, function() {
	this.src = this.getAttribute('data-src');
	clearInterval(this.timer);
});
</script>

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

<script>
$(function(){

	//onhover image
	$('.js-hover').hover(function() {
		var _this = this,
			images = _this.getAttribute('data').split(','),
			counter = 0;

		this.setAttribute('data-src', this.src);
		_this.timer = setInterval(function(){
			if(counter > images.length) {
				counter = 0;
			}
			if (images[counter] != undefined) {
				_this.src = images[counter];
			} else {
				_this.src = _this.getAttribute('data-src');
			}

			counter++;
		}, 750);

	}, function() {
		this.src = this.getAttribute('data-src');
		clearInterval(this.timer);
	});

});
</script>

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

<img onmouseout="this.src='/upload/partners/logo_office1.png'" onmouseover="this.src='/upload/partners/logo_office.png'" src="/upload/partners/logo_office1.png" class="partner" alt="office">

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

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

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. а можно ссылку? мне так будет легче понять проблему

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

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

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

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

Залишити коментар до Влад Скасувати коментар