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

Question

你好我在大学里做 HTML 过去 3 个月，必须设计一个网站。我快完成了，但我正在尝试将 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 元素/要定位的幻灯片放映传递给它。

这是我能想到的最快的 fiddle 方法 Fiddle Example

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

how can i use two javascript slideshows on one page? html

html

javascript

css

computer-science