运用jQuery实现的图片浏览器

　　function  imageGally(opt){
　　var targetDivId=opt.targetDivId; //-----主框架ID
　　var currentImageIndex = opt.currentImageIndex; //----显示当前图片索引的容器ID
　　var totalImage = opt.totalImage; //显示图片总数的容器ID
　　var bigImagePre = opt.bigImagePre; //大图片向前ID
　　var bigImageNxt = opt.bigImageNxt; //大图片向后ID
　　var bigImageCnt = opt.bigImageCnt; //显示当前大图片的容器ID
　　var smlImagePre = opt.smlImagePre; //小图片向前ID
　　var smlImageNxt = opt.smlImageNxt; //小图片向后ID
　　var smlImageCnt = opt.smlImageCnt; //小图片导航栏ID
　　var imgDataSrc = opt.dataSrc; //数据源[{ImageName:'a1',ImageUrl:'2.jpg'},{ImageName:'a2' ,ImageUrl:'1.jpg'}]
　　var imgMaxWidth = opt.MaxWidth; //大图片的最宽
　　var imgMaxHight = opt.MaxHight; //大图片的最高
　　var  __imageCount= imgDataSrc .length;
　　var __currentImageIndex = 0;
　　if (__imageCount == 0) {
　　$(targetDivId).css({"text-align":"center"}).html("0 && image.height>0){
　　if(image.width/image.height>= FitWidth/FitHeight){
　　if(image.width>FitWidth){
　　ImgD.width=FitWidth;
　　ImgD.height=(image.height*FitWidth)/image.width;
　　}else{
　　ImgD.width=image.width;
　　ImgD.height=image.height;
　　}
　　} else{
　　if(image.height>FitHeight){
　　ImgD.height=FitHeight;
　　ImgD.width=(image.width*FitHeight)/image.height;
　　}else{
　　ImgD.width=image.width;
　　ImgD.height=image.height;
　　}
　　}
　　}
　　$(bigImageCnt ).empty();
　　$("").attr("src",imgUrl).css({ "width": ImgD.width ,"height":ImgD.height }).appendTo(bigImageCnt );
　　}
　　var showCurrentImageIndex = function(url) {
　　__currentImageIndex = imgaePositon[url];
　　$(currentImageIndex).html(__currentImageIndex + 1);
　　$(smlImageCnt + ">img").attr("style", "");
　　$(smlImageCnt + ">img[src='" + url + "']").css({ "border": "1", "border-style": "solid", "border-color": "yellow" });
　　}
　　var  preappendSmallImage=function(imgUrl){
　　$(smlImageCnt +">img:last").remove();
　　$("").attr("src",imgUrl).click(function(){
　　createBigImage($(this).attr("src"));
　　showCurrentImageIndex($(this).attr("src"));
　　}).prependTo(smlImageCnt);
　　}
　　var  appendSmallImage=function(imgUrl){
　　$(smlImageCnt +">img:first").remove();
　　$("").attr("src",imgUrl).click(function(){
　　createBigImage($(this).attr("src"));
　　showCurrentImageIndex($(this).attr("src"));
　　}).appendTo(smlImageCnt);
　　}
　　var   getCuurentBigImagePostion=function (){
　　var imgUrl=$(bigImageCnt +">img:first")[0].src ;
　　return imgaePositon[ imgUrl ] ;
　　}
　　$(smlImageNxt ).click(function (){
　　var lastImgUrl= $(smlImageCnt +">img:last")[0].src;
　　var lastPostion=imgaePositon[lastImgUrl] ;                   
　　if(lastPostion img:first")[0].src;
　　var firstPostion= imgaePositon[firstImgUrl] ;
　　if(firstPostion > 0  ){
　　preappendSmallImage( imgDataSrc[firstPostion-1].ImageUrl) ;
　　}   else {
　　alert("没有啦!");
　　}
　　});
　　$(bigImageNxt).click(function() {
　　var imgPosition = getCuurentBigImagePostion();
　　if (imgPosition = 1) {
　　var preUrl = imgDataSrc[imgPosition - 1].ImageUrl;
　　createBigImage(preUrl);
　　preappendSmallImage(preUrl);
　　showCurrentImageIndex(preUrl);
　　} else {
　　alert("没有啦");
　　}
　　});
　　//----------------添加小图片导航页面
　　//----------同时初始化大图片和小图片
　　for(var i=0;i").attr("src",curl).click(function(){
　　createBigImage($(this).attr("src"));
　　showCurrentImageIndex($(this).attr("src"));
　　}).appendTo(smlImageCnt);
　　if( i==0){
　　createBigImage(curl );
　　showCurrentImageIndex(curl );
　　};
　　}
　　}
　　------------------------------------HTML模板------------------
　　
　　
　　页码：0of0
　　
　　
　　skin/mainaer/images/bu tton_l.gif" id="bigPicPre0">
　　
　　
　　
　　skin/mainaer/images/bu tton_r.gif" id="bigPicNxt0">
　　
　　
　　
　　
　　skin/mainaer/images/bu tton_l2.gif" id="smlPicPre0">
　　
　　skin/mainaer/images/bu tton_r2.gif" id="smlPicNxt0">
　　
　　
　　
　　----------------------------调用方法-----------------------
　　var h1=[];             imageGally({targetDivId:"#proImageContentDiv0",
　　currentImageIndex:"#proImagePageIndex0",
　　totalImage:"#proImageCount0",
　　bigImagePre:"#bigPicPre0",bigImageNxt:"#bigPicNxt0 ",bigImageCnt:"#bigImageCnt0",smlImagePre:"#smlPicP re0",smlImageNxt:"#smlPicNxt0",smlImageCnt:"#smlIma geContent0",
　　dataSrc :h0,MaxWidth:530,MaxHight:350});
　　--------------------效果展示页面：-----------------------
　　http://hangzhou.mainaer.com/shangchengqu/4.htm