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

【问题标题】：how can i use two javascript slideshows on one page? html如何在一页上使用两个 javascript 幻灯片？ html
【发布时间】：2017-01-14 21:09:58
【问题描述】：

嗨，我在大学的过去 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>

【问题讨论】：

您可能对两者使用了相同的 ID。尝试使用不同的 ID 或按类引用两者
似乎window.onload 的调用方式可能是个问题；您也可能需要使用setInterval 而不是setTimeout。如果您能详细说明 我正在尝试将 4 个幻灯片显示在一页上 的含义，那就太好了

标签： javascript html css computer-science

【解决方案1】：

最简单的事情是复制幻灯片的 HTML 结构，将 ID 和 NAME 属性更改为 link2、slide2 和 mydiv2，然后复制交换函数，将其命名为 swapImage2()，然后像这样添加它：

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

更简洁的解决方案是使用单个 swapimage 函数并将您想要定位的目标 DOM 元素/幻灯片传递给它。

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

【讨论】：