Javascript 每20秒更改一次带有行的图像

我在这里找到了这段代码，但我需要在这个javascript中添加这些东西

淡入效果

想要显示2行图像，意味着我将添加10个图像。第1行显示5幅图像，第2行显示5幅图像

希望为每张图片添加文字，例如名称和价格

将鼠标移到图像更改停止上

变量链接=[
“abc.org”，
“def.org”，
“ghi.org”，
“ghi33.org”
];
变量图像=[
"https://dmcfebaedy6rh.cloudfront.net/product/front/white/spl5596.360x180.1443167798.jpg",
"https://dmcfebaedy6rh.cloudfront.net/product/front/white/mt6050.360x180.1430798334.jpg",
"https://dmcfebaedy6rh.cloudfront.net/product/front/white/pl5087.360x180.1423189940.jpg", 
"https://dmcfebaedy6rh.cloudfront.net/product/front/white/spl5596.360x180.1443167798.jpg"
];
var i=0；
var renew=setInterval（函数（）{
如果（links.length==i）{
i=0；
}
否则{
document.getElementById（“bannerImage”）.src=images[i]；
document.getElementById（“bannerLink”）.href=links[i]；
i++；
}
},10000);
像这样的问题的问题是，我们不知道你真正的目标是什么。我们需要从你那里得到一点代码，这样我们就可以看到你的方向

我相信我们中的任何一个人都可以创建一个小型旋转木马，但这并不是这个网站的真正目的。这是为了帮助人们了解并找出他们做错了什么，或者他们需要做什么来解决问题

也就是说，如果我写这一切而不提供一些代码，那我就错了


var caraSel=document.querySelector（“.simple image”）；
var imageSel=document.queryselectoral（“.bannerLink”）；
var imageSelMax=imageSel.length-1；
var-imageInt=0；
var imageIntNext=1；
var renew=setInterval（函数（）{
imageSel[imageInt].classList.add（“隐藏”）；
imageSel[imageIntNext].classList.remove（“hidden”）；
imageSelMax===imageInt？imageInt=0:++imageInt；
imageSelMax===imageIntNext？imageIntNext=0:++imageIntNext；
}, 1000);
caraSel.addEventListener（“mouseover”，function（）{
清除间隔（更新）；
});
caraSel.addEventListener（“mouseout”，function（））{
续订=设置间隔（函数（）{
imageSel[imageInt].classList.add（“隐藏”）；
imageSel[imageIntNext].classList.remove（“hidden”）；
imageSelMax===imageInt？imageInt=0:++imageInt；
imageSelMax===imageIntNext？imageIntNext=0:++imageIntNext；
}, 1000);
});
。简单图像{
位置：相对位置；
宽度：360px；
高度：180像素；
}
班纳林先生{
位置：固定；
背景：#FFF；
排名：0；
左：0；
将改变：不透明度；
过渡：不透明度。6秒缓解；
文字装饰：无；
颜色：#000；
}
.bannerLink.hidden{
不透明度：0；
}
欢迎来到SO。你有没有尝试过任何方法来实现你的目标？那么请出示它。