Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2019, 01:48
Интересующийся
Отправить личное сообщение для kostia170985 Посмотреть профиль Найти все сообщения от kostia170985
 
Регистрация: 29.04.2015
Сообщений: 11

Смена картинками при наведении.
Помогите кто чем может.
Задача такая.
На сервере есть картинки 5 шт
Нужно сделать что бы при наведении на него каждые 5 сек сменялся src на новое фото. А при выходе из фокуса возвращал 1 фотку.
За ранее всем благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2019, 08:57
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

) ленивый народ пошел...
<style>
.hoverable {
  width: 4em
}
</style>
<img class="hoverable" src="one.jpg" data-fotos="one.jpg, two.jpg, three.jpg, four.jpg, five,jpg">
<script>
  document.querySelectorAll('.hoverable').forEach(img => {
    let fotos = img.dataset.fotos.split(", ")
    let current = 0
    let interval
    img.addEventListener('mouseenter', function() {
      console.log('hi')
      interval = setInterval(function() {
        current++
        if (current >= fotos.length) {
          current = 0
        }
        img.src = fotos[current]
      }, 1000)
    })
    img.addEventListener('mouseleave', function() {
      img.src = fotos[0]
      clearInterval(interval)
    })
  })
</script>

Последний раз редактировалось SuperZen, 12.04.2019 в 09:00.
Ответить с цитированием
  #3 (permalink)  
Старый 12.04.2019, 09:06
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от SuperZen
"one.jpg, two.jpg
split(", ")
Нет, без пробелов, а то такие допущения могут привести и к ошибкам.
Ответить с цитированием
  #4 (permalink)  
Старый 12.04.2019, 09:14
Интересующийся
Отправить личное сообщение для kostia170985 Посмотреть профиль Найти все сообщения от kostia170985
 
Регистрация: 29.04.2015
Сообщений: 11

Огромное спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена изображения при наведении курсора Lutsk Элементы интерфейса 6 23.04.2024 09:23
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
Смена body{background-url} при наведении на ссылку amator0 Элементы интерфейса 2 18.03.2014 21:53
Смена картинки при наведении курсора на поле. ExtrAngel Общие вопросы Javascript 1 27.11.2013 23:11
Смена фона при наведении Crystal Элементы интерфейса 3 13.10.2011 12:23