0

На странице есть див в нем картинка, необходимо при наведении мыши подменять src каритнки, что - бы они чередовались по очереди с интервалом времени.

<div class="container">
    <img width="200" height="150" src="img1.jpg" alt="">
</div>  

var arr = [
        'img1.jpg',
        'img2.jpg',
        'img3.jpg',
        'img4.jpg',
    ];
var container = document.querySelector('.container');
container.addEventListener('mouseover', function (event) {
    if(event.target == container.querySelector('img')) {
        for(var i = 0; i < arr.length; i++) {
            event.target.setAttribute('src', arr[i]);
        }
    } else return;
});

Не могу придумать, что - бы элементы массива подставлялись по очереди с задержкой.... так как цикл отрабатывает и подставляется сразу последний элемент массива... Подскажите как будет правильно прикрутить интервалвы или таймауты.

2 ответа 2

0

Можете в цикле поставить таймаут и изменять картинки с задержкой в 1 секунду (или более)

for(var i = 0; i < arr.length; i++) {    
setTimeout(event.target.setAttribute('src', arr[i]), 1000)
}
1
  • ставил, эффекта нет.... цикл все равно отрабатывает и подставляется последний элемент массива.
    – pepel_xD
    4 авг 2016 в 8:00
0

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

//функция подмены src
//elem - елемент над которым происходят манипуляции
//way - массив с путями к картинкам
//i - счетчик 
function slider(elem, way, i) {
  elem.setAttribute('src', way[i]);
  // проверяем что - бы счетчик не был больше длинны массива, иначе сбрасываем в 0
  if (i == way.length - 1) {
    i = 0;
  } else {
    i++;
  }
  //устанавливаем таймер и рекурсивно запускаем функцию саму из себя
  var timer = setTimeout(slider, 1000, elem, way, i);
  //добавляем событие на контейнер с картинкой на уход мыши, удаляем таймер и устанавливаем src в исходное состояние.
  container.addEventListener('mouseout', function() {
    clearTimeout(timer);
    elem.setAttribute('src', way[0]);
  });
}
//собственно сам массив с путями картинок
var arr = [
  'http://www.stihi.ru/pics/2011/04/07/8199.jpg',
  'http://autowalls.ru/walls/porsche/autowalls_ru_390.jpg',
  'http://wallpaperrs.com/uploads/nature/earth-forest-mind-blowing-wallpaper-91990-142978533514.jpg',
  'http://mykartinka.ru/_ph/22/664889599.jpg',
];
var container = document.querySelector('.container');
// устанавливаем событие на наведение мыши на контейнер с картинкой
container.addEventListener('mouseover', function(event) {
  //проверяем что событие возникло на картинке, устанавливаем счетчик в 1 и запускаем функцию подмены src
  if (event.target == container.querySelector('img')) {
    var i = 1;
    slider(event.target, arr, i);
  } else return;
});
<div class="container">
  <img width="200" height="150" src="http://www.stihi.ru/pics/2011/04/07/8199.jpg" alt="">
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.