Как при наведении на картинку запустить галерею из 4-х картинок?

Question

[free_man1992]

Всем привет!

Js, к сожалению, еще плохо знаю, нужна ваша помощь!
Нужно что бы при наведении картинка 1 менялась на картинку 2, картинка 2 на картинку 3 и т.д.
Сменить 1 картинку на 2 легко, а вот сделать небольшую галерею не получается(
И возможно ли указать время для смены одной картинку на другую?

Большое спасибо!

<img id="image"/>

var image = document.getElementById("image");
var imagesURLs = [
  "http://placehold.it/260x150",                           
  "http://placehold.it/265x150",
  "http://placehold.it/270x150",
  "http://placehold.it/275x150"
];

image.src = imagesURLs[0];

image.onmouseover = function(){
    this.src = imagesURLs[3];
};

image.onmouseout = function(){
    this.src = imagesURLs[0];
};

Answer 1

[Андрей Щетинин]

Посмотри на функцию setInterval.

var index = 0;
var interval = null;
var image = document.getElementById("image");
var imagesURLs = [
  "http://placehold.it/260x150",                           
  "http://placehold.it/265x150",
  "http://placehold.it/270x150",
  "http://placehold.it/275x150"
];
image.onmouseover = function(){
    interval = setInterval(function(){
      if(!imagesURLs[++index]){
          index = 0
       }
        image.src = imagesURLs[index]
   }, 1000);
};

image.onmouseout = function(){
  clearInterval(interval)
};

Comments

[free_man1992]

Спасибо большое!