Как сделать смену изображений из array на js?

Question

[maragon]

Есть карточка товара и при наведении хочу чтобы основноая картинка сменялась по таймеру на картинки из data-images тега img.

Например:

<img src="основная картинка" data-images="1.jpg,2.jpg,etc.jpg,">

В данном примере ниже не срабатывает сам таймер.. Помогите реализовать.

function(){
		$(".product__image").hover(function(){
			var image =  $(this).find("img"),
				images = image.attr("data-images").split(",");
					
				original_src = image.attr("src");
				
			if(images){
			var i = 0,
				max_count = images.length;
				
				function changeImage(){
					if(++i >= max_count){ i = 0; }
					image.attr("src", images[i]);
				}
				
				setInterval(changeImage(), 5000);
			}
		}, function(){
			var image =  $(this).find("img");	
			image.attr("src", original_src);
		});
});

Comments

[Роман]

в вашем примере при каждом наведении будет запускаться новый сет интервал, но удаляете ли вы уже запущенный при уходе курсора с карточки товара? Если нет, ждите проблем в дальнейшем)

[maragon]

Роман, Хм, что-то типо:

timer = setInterval(changeImage, 2000);
и при уходе
clearInterval(timer)
??

[Stockholm Syndrome]

maragon, именно

[Роман]

maragon, да

Answer 1

[Stockholm Syndrome]

вы передаёте результат вызова, а не саму в функцию в setInterval
правильно будет так
setInterval(changeImage, 5000);