自动轮播banner图

Html代码：

<div class="banner">
	<img src="images/c.jpg">
    <img src="images/b.jpg">
    <img src="images/a.jpg">
	<div class="btns">
		<span class="on"></span>
		<span></span>
		<span></span>
	</div>  
</div>

Js代码：

<script>
	$(function(){
		$(".banner img").hide();
		$(".banner img").eq(0).show();
		var n=0;
		function changeImg(){
			if(n>1){
				n=0;
			}else{
				n++;
			}
			$(".banner img").hide();
			$(".banner img").eq(n).show();
			$(".btns span").removeClass("on");
			$(".btns span").eq(n).addClass("on");
		}
		var timer = setInterval(changeImg,2000);
		$(".banner").hover(function(){
			clearInterval(timer);	
		},function(){
			timer = setInterval(changeImg,2000)
		})
		$(".btns span").click(function(){
			$(".btns span").removeClass("on")
			$(this).addClass("on")	
			n = $(".btns span").index(this);
			$(".banner img").hide();
			$(".banner img").eq(n).show();
		})
	})
</script>