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

Question

嗨，我过去3个月在大学里学习HTML，必须设计一个网站。 我快完成了，但是我试图将4个幻灯片放到一页上。 我可以使一个工作正常，但是我创建的下一个似乎可以覆盖第一个。.有人可以看看我的代码，让我知道我应该怎么做..这是两个幻灯片的代码，除了链接和图像是不同。

 var i = 0; var image = new Array(); // LIST OF IMAGES image[0] = "strawberrypancakes.jpg" image[1] = "chickenbroth.jpg"; image[2] = "noodlesalad.jpg"; var k = image.length-1; var caption = new Array(); // LIST OF CAPTIONS caption[0] = "Strawberry buckwheat pancakes"; caption[1] = "Hot chicken broth"; caption[2] = "Pepper and noodle salad"; var link= new Array(); // LIST OF LINKS link[0] = "http://www.jamieoliver.com/recipes/breakfast/"; link[1] = "http://www.jamieoliver.com/recipes/chicken/"; link[2] = "http://www.jamieoliver.com/recipes/vegetables/"; function swapImage(){ var el = document.getElementById("mydiv"); el.innerHTML=caption[i]; var img = document.getElementById("slide"); img.src= image[i]; var a = document.getElementById("link"); a.href= link[i]; if(i < k ) { i++;} else { i = 0; } setTimeout("swapImage()",5000); } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { swapImage(); }); 

  <table style="border:none;background-color:transparent;"> <tr> <td> <a name="link" id="link" href="http://www.siteforinfotech.com/" target="_blank"><img name="slide" id="slide" alt ="my images" height="250" width="590" src="image-1.png"/></a> </td> </tr> <tr> <td align="center"style="font:small-caps bold 15px georgia; color:blue;"> <div id ="mydiv"></div> </td> </tr> </table> 

Answer 1

最简单的事情是，只需复制幻灯片的HTML结构，将ID和NAME属性更改为link2，slide2和mydiv2，然后复制复制函数，将其命名为swapImage2（），然后像添加它一样所以：

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

较干净的解决方案是具有单个swapimage函数，并将要定位的目标DOM元素/幻灯片放到其中。

这是我想到小提琴示例的最快方法的小提琴