Изменить изображение src с изображением списка

Question

Я хочу сделать список массивов изображений или список html, и всякий раз, когда я нахожусь на моем изображении, он должен меняться один за другим с эффектом затухания или слайда, и если бы у меня было изображение, которое должно меняться с изображениями по умолчанию

вопрос 1: какой вид списка, который я должен создать? Список или массив html?

вопрос 2: Я создаю диапазон для получения URL-адреса изображения с помощью data-src, например, это разметка и право?

click to see demo link on codepen

HTML

<div class="img-area"> 
<img src="http://cdn.anitur.com.tr/resimler/logo/2016-11/otel_granada-luxury-belek_9cca25crBlK2lNq0AS5H.jpg" alt=""> 
    <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_UIaJYkbajuilxPCGYzxM.jpg"> 
    <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_UIaJYkbajuilxPCGYzxM.jpg"> 
</div> 

    <div class="img-area"> 
<img src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_qtNSeosTlMq2dDG35zvY.jpg" alt=""> 
    <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_OnYNchpgK6PJmucaHMHN.jpg"> 

и мои JS, но я не знаю, что я пишу

$(document).ready(function(){ 
$(".img-area img").hover(function(){ 
    $(this).parents(".img-area").find("img"); 
}) 
}); 

Answer 1

Изменение изображения в интервале с использованием

function changeImage(img){ 
    // document.getElementById('bigImage').src=img; 
    setTimeout(function() {document.getElementById('bigImage').src=img;},1250); 
}