用圖像列表更改圖像src

Question

我想將圖像列表設置為數組或html列表，並且每當我將鼠標懸停在圖像上時，它都必須使用淡入淡出或滑動效果逐一更改，而當我懸停時，我的圖像必須使用默認圖像來更改

問題1：我需要創建哪種列表？ HTML列表或數組？

問題2：我創建跨度以使用data-src獲取圖像url，例如，該標記正確嗎？

單擊以查看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);
}