当前位置: 代码迷 >> Web前端 >> 图片滚动显示的步骤
  详细解决方案

图片滚动显示的步骤

热度:250   发布时间:2013-11-09 17:06:34.0
图片滚动显示的方法
<%@ 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>

?

?

  相关解决方案