图片滚动显示的方法

<%@ page contentType="text/html;charset=UTF-8"%>

<div class="grid_8 gridTab">
<!--[banner start]-->
<div class="grid_8Img">
	<a href="javascript:;"> 
		<img src="da/images/banner300x320_03.jpg" alt="" />
	</a>
</div>
<p class="grid_8Btn">
	<a class="active" href="javascript:;"></a>
	<a href="javascript:;"></a>
	<a href="javascript:;"></a>
</p>
</div>

<script type="text/javascript">
/***********************首页 中间banner切换*******************************/
alphaJson={
		img : [
				'da/images/banner300x320_01.jpg',
				'da/images/banner300x320_02.jpg',
				'da/images/banner300x320_03.jpg'
		]
};
picAlpha($('.grid_8Img'),$('.grid_8Btn a'),$('.grid_8Img img'),alphaJson);

function picAlpha(parent,aBtn,oImg,json){
	//参数parent:鼠标经过清定时器的元素，参数：aBtn 事件按钮，参数 ：oImg 要换的图片 ; 参数json 调用图片的数据 （格式如上）
		var num=0;
		var timer=null;	
		aBtn.click(function(){
			if($(this).get(0).className=='active') return;
			num=$(this).index();
			alphaShow()
		})	
		
		timer=setInterval(function(){
			num++;
			num%=aBtn.length;
			alphaShow();
		},5000);
			
		parent.on('mouseover',function(){
			clearInterval(timer);	
		})
		parent.on('mouseout',function(){
			timer=setInterval(function(){
				num++;
				num%=aBtn.length;
				alphaShow();
			},5000);
		})
		
		function alphaShow() {
			aBtn.removeClass();
			aBtn.eq(num).addClass('active')
			oImg.stop(true).animate({
				opacity : 0.2	
			},function(){
				
				oImg.attr('src',json.img[num]);
				oImg.stop(true).animate({opacity:1});
			});
		};
			
};
</script>