js实现自动轮播效果【两种方式】

第一种方法：

html代码：

<ul>
	<li class="imgs"><img src=""/></li>
	....
</ul>

css部分：（需先将图片设为不可见）

.imgs{
	display: none;
}

js代码如下：

window.onload = function() {
	var imgs = document.getElementsByClassName('imgs');
	var i=0;
	//让第一张图片先可见
	imgs[i].style.display='block';
	//设置定时器，每隔1秒图片自动轮播
	setInterval(function(){
		if(i<imgs.length){
			i++;
			if(i>imgs.length-1){
				i=0;
			}
			imgs[i].style.display='block';
		}
		for(j=0;j<imgs.length;j++)
		{
			if(i!=j){
				imgs[j].style.display='none';
			}
		}
	},1000);
}

第二种方法：

<script type="text/javascript">
			var urls;
			function animate(pos){
				pos%=urls.length;//在最后一个图像显示之后，回到起始值
				document.images["animation"].src=urls[pos];
				window.setTimeout("animate("+(pos+1)+");",500);
			}
			
			window.onload=function(){
				urls=new Array(
				"1.jpg",
				"2.jpg",
				"3.jpg"
				);
				animate(0);
			}
		</script>

html部门：

<img src="1.jpg" name="animation"/>