Question

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

＆＃13;

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(); 
		});

＆＃13;

		<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>

＆＃13;

Answer 1

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

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

更清洁的解决方案是使用单个swapimage函数并将目标DOM元素/幻灯片放入其中。

这是我能想到Fiddle Example

的最快捷方式

我怎样才能在一个页面上使用两个javascript幻灯片？ HTML

1 个答案: