Javascript 在html中制作两个幻灯片

我可以成功地用html制作幻灯片，但我尝试制作两张幻灯片，但效果不佳，以下是我的代码：

<script type="text/javascript">
var image1 = new Image()
image1.src = "img/home/residential.gif"
var image2 = new Image()
image2.src = "img/home/1.gif"
var image3 = new Image()
image3.src = "img/home/2.gif"
</script>

<table align="center" width="70%"cellpadding=5 cellspacing=5>

<tr>
    <td rowspan=2 align=center><a href="artistic.html"><figure><img src="logo1.gif" alt="Atristic Impressions" width="400" height="600" name="slide"/><figcaption style="color: #610B21">Artistic Impressions</figure></td>
    <script type="text/javascript">
            var step=1;
        function slide()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<3)
                step++;
            else
                step=1;
            setTimeout("slide()",5000);
        }
        slide();
</script>

<script type="text/javascript">
    var image1 = new Image()
    image1.src = "img/barns/1.gif"
    var image2 = new Image()
    image2.src = "img/barns/2.gif"
    var image3 = new Image()
    image3.src = "img/barns/3.gif"
    var image4 = new Image()
    image4.src = "img/barns/4.gif"
</script>
<td align=center><a href="Barns.html"><figure><img src="img/barns/1.gif" alt="Barn Conversions" width="400" height="300" name="slide"/ ><figcaption style="color: #610B21">Barn Conversions</figure></td>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image1"+step+".src");
            if(step<3)
                step++;
            else
                step=1;
            setTimeout("slideit()",5000);
        }
        slideit();
</script>

var image1=新图像（）
image1.src=“img/home/residential.gif”
var image2=新图像（）
image2.src=“img/home/1.gif”
var image3=新图像（）
image3.src=“img/home/2.gif”
艺术印象
var阶跃=1；
函数幻灯片（）
{
document.images.slide.src=eval（“image”+step+“.src”）；
如果（步骤两个
都有“slide”的名称，则应为它们指定不同的名称，以便浏览器知道使用哪一个。例如“slide1”和“slide2”应该做这项工作。
发生的情况是，您使用的代码与自身冲突。您在全局级别定义了图像，然后在以后设置第二个节目时重新定义了它们。您还复制了step变量，尽管如果使用相同的值，这可能没有多大关系。您还使用两个滑块脚本，因此其中一个上的目标需要更改。更简洁的方法是使用一个函数添加一些参数，以便您可以同时处理图像集和DOM元素

比如：-

function slide( image_id, image_array) {

     myImage = getElementById(image_id);
     myImage.src = image_array[step];

}

当然，还有很多，还有很多功能更好的图像滑块，可以运行两个独立的实例。我建议研究其中一些