jquery实现2d分页

点击页码按钮，分动画切换到相应的页面，效果如下图

 

这是真实环境的效果，你也可以前往此处观看，点击如下圈圈处切换，

 

 

 

 

 

var page1=["img/blue1.png","img/red1.png","img/white1.png"];//第1页
var page2=["img/blue2.png","img/red2.png","img/white2.png"];//第2页
var page3=["img/blue3.png","img/red3.png","img/white3.png"];//第3页

var dataList=new Array();
dataList.push(page1);
dataList.push(page2);
dataList.push(page3);
$(document).ready(function(){
	var f=0;
	$("#dbRoWrap img").each(function(){//初始化第一页数据
		$(this).attr("src",page1[f]);
		 f=f+1;
	});
	$("#btn1").click(function(){
		 turnPage(1);
	});
	$("#btn2").click(function(){
		 turnPage(2);
	});
	$("#btn3").click(function(){
		 turnPage(3);
	});
});

function btnMask(){
	
}

function removeBtnMask(){
	alert("最后一个翻完");
}

function turnPage(pageNo){
	btnMask();
	var imgQty=$("#dbRoWrap div").size();
	var timeInterval=200;
	var i=0;
	$("#dbRoWrap div").each(function(){//遍历dbRoWrap下的所有图片容器
		var obj=$(this);
		 doTurnPage(i,pageNo,obj,timeInterval,imgQty); 
		 i=i+1;
	});
}
function doTurnPage(i,pageNo,obj,timeInterval,imgQty){
	var opt={rotateSpeed:100};
	 timeInterval=timeInterval*i;
	$(obj).each(function(){//遍历图片容器中的图片
		var $this=$(this);
		var $img=$this.find('img');
		var imgWidth=$img.width();
		var imgHeight=$img.height();
		$this.css({'width':imgWidth,'height':imgHeight});//设置图片容器的宽高
		setTimeout(function(){
			$img.stop()
			.animate({'left':imgWidth/2,'width':0},opt.rotateSpeed,function(){
				$(this).attr({'src':dataList[pageNo-1][i]});//设置图片路径
			}).animate({'left':0,'width':imgWidth},opt.rotateSpeed,function(){
				if(i==(imgQty-1)){
					removeBtnMask();
				}
				
			});                
		},timeInterval);//设置轮着翻页
	  });
}

 源文件在附件中

 

如果您觉得我的文章给了您帮助，请为我买一杯饮料吧！以下是我的支付宝，意思一下我将非常感激！