Гиф анимация есть? А если найду?) В этом небольшом уроке мы рассмотрим как создать эффект быстрой смены картинок при помощи 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- названия атрибутов считаются валидными).
Нахожусь в поисках решения проблемы, в которой при загрузки страницы, бывает так, что картинка не загружается и в исходном коде src=”” пусто. Непонятно почему так происходит, но происходит. Может просто следует кеш включить на сайте. Скрипты вынес все в шапку. Думал этот вариант будет работать без перебоев, но нет, временами картинка не подгружается, хотя и скорость ~99мбит на speed тесте…. Всё же взял это скрипт из за класса, иначе все картинки, которые надо, или не надо ищут data src…
Если я вас правильно понял, то вы можете просто проверять в самом скрипте на наличие атрибута src у изображения, и только потом выполнять скрипт:
$(‘.js-hover’).hover(function() {
if (this.src != false) { /*код скрипта*/}
});
Он работает полностью. Просто когда резко наводишь курсор мышки на картинку, в момент когда страница толком еще не загрузилась, выскакивают пустые окошки вместо картинок, нажимаю проинспектировать элемент выдаёт в адресе 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…
Могу скинуть на почту, если у вас более менее либеральные взгляды на всемирную паутину))