HTML+JS实现的简单图片轮播

实现方法众多，这里我的思路为：

　　容器（这里我使用table）中的初始图片为某一张，JS的timer（理解为全局）的timerout()事件中改变容器中<img>的src属性值，也即图片路径，从而达到每若干秒更换一次图片。

简单实现：

一、容器及<img src>初始值

<table style="height:20%; width:100%; background-color:#FFF">
　　<tr>
   　　<td id="main_info_jpeg" onclick="fun1()"> //此处onclick事件也能切换图片
   　　　　<img id='imginfo' src="./image/test01.jpg" style="height:100%; width:100%; background-color:#FFF" title="01">
   　　</td>
   </tr>
</table>

二、JS轮换函数及timer

<script type="text/javascript">
	//以下脚本实现三张主图的切换
	function fun1(){
		var now_jpeg = document.getElementById("imginfo").getAttribute("src");
		//document.writeln(now_jpeg);
		switch(now_jpeg)
		{
			case './image/test01.jpg':
				document.getElementById('imginfo').setAttribute("src",'./image/test02.jpg');
				break;	
			case './image/test02.jpg':
				document.getElementById('imginfo').setAttribute("src",'./image/test03.jpg');
				break;	
			case './image/test03.jpg':
				document.getElementById('imginfo').setAttribute("src",'./image/test01.jpg');
				break;			
			default:
				document.writeln("未获取src");
				break;	
		}
	}
	self.setInterval('fun1()',3000); //作为全局变量理解，事件为：timerout(),事件处理函数为:fun1().
</script>　　

三、实现效果

　　1，鼠标点击图片，图片切换

　　2，不做任何操作，每3秒图片自动切换一次