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秒圖片自動切換一次