如何在一个页面上使用两个javascript幻灯片？html

嗨，我在大学的三个月里一直在做HTML，我必须设计一个网站。我几乎完成了，但我试图把4个幻灯片放在一个页面上。我可以让一个工作良好，但我创建的下一个似乎覆盖了第一个。。谁能看看我的代码，给我一个想法我该怎么做。。这是我的两个幻灯片的代码，除了链接和图像是不同的

var i=0；
var image=新数组（）；
//图像列表
图像[0]=“strawberrypancakes.jpg”
图片[1]=“chickenbroth.jpg”；
图[2]=“noodlesala.jpg”；
var k=image.length-1；
var caption=新数组（）；
//标题列表
说明[0]=“草莓荞麦煎饼”；
标题[1]=“热鸡汤”；
描述[2]=“胡椒粉和面条沙拉”；
var link=新数组（）；
//链接列表
链接[0]=”http://www.jamieoliver.com/recipes/breakfast/"; 
链接[1]=”http://www.jamieoliver.com/recipes/chicken/"; 
链接[2]=”http://www.jamieoliver.com/recipes/vegetables/";   
函数swapImage（）{
var el=document.getElementById（“mydiv”）；
el.innerHTML=标题[i]；
var img=document.getElementById（“幻灯片”）；
img.src=图像[i]；
var a=document.getElementById（“链接”）；
a、 href=链接[i]；
如果（i
最简单的事情是，我首先要复制幻灯片的HTML结构，将ID和NAME属性更改为link2、slide2和mydiv2，然后复制交换函数，将其命名为swapImage2（），然后像这样添加：

addLoadEvent(function() {
    swapImage();   // for the first slideshow
    swapImage2();  // for second slideshow
});

一个更干净的解决方案是使用一个swapimage函数，并向其中传递您想要定位的目标DOM元素/幻灯片

下面是我能想到的最快的方法
你可能对这两个都使用了相同的ID。尝试使用不同的Id，或者按类引用这两个Id，就像调用
窗口一样。onload
可能是一个问题；此外，您可能需要使用
setInterval
而不是
setTimeout
。这将是伟大的，如果你能详细说明你的意思，我试图把4个幻灯片放在一个页面上