运用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("<img   src='http://www.mainaer.com/uploadfiles/mainaer/nopic.gif");
                     return;
                 }
                 var  imgaePositon=new Object ();
                 for(var ci=0;ci<__imageCount ;ci ++){
                      imgaePositon[imgDataSrc[ci].ImageUrl ] = ci ;
                 }
                 //-------------显示图片总数
                 $(totalImage).html(__imageCount );
                 //---------------创建大图片并显示出来
                 var  createBigImage=function(imgUrl){
                            var FitWidth =imgMaxWidth ;
                            var FitHeight=imgMaxHight ;
                            var ImgD={ width: FitWidth , height:FitHeight };
                            var image=new Image();
                            image.src= imgUrl ;
                            if(image.width>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();
                            $("<img />").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();
                         $("<img />").attr("src",imgUrl).click(function(){
                            createBigImage($(this).attr("src"));
                            showCurrentImageIndex($(this).attr("src"));
                           
                         }).prependTo(smlImageCnt);
                 }
                 var  appendSmallImage=function(imgUrl){
                         $(smlImageCnt +">img:first").remove();
                         $("<img />").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 <  __imageCount-1  ){
                            appendSmallImage( imgDataSrc[lastPostion+1].ImageUrl) ;
                       }   else {
                            alert("没有啦!");
                       }
                 });
                
                 $(smlImagePre ).click(function (){
                       var firstImgUrl= $(smlImageCnt +">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 < __imageCount - 1) {
                         var nextUrl = imgDataSrc[imgPosition + 1].ImageUrl;
                         createBigImage(nextUrl);
                         appendSmallImage(nextUrl);
                         showCurrentImageIndex(nextUrl);
                     } else {
                     alert("没有啦");
                     }
                 });

                 $(bigImagePre).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<__imageCount && i< 6 ;i++){
                         var curl=imgDataSrc[i].ImageUrl ;
                         $("<img />").attr("src",curl).click(function(){
                            createBigImage($(this).attr("src"));
                            showCurrentImageIndex($(this).attr("src"));
                           
                         }).appendTo(smlImageCnt);
                         if( i==0){
                            createBigImage(curl );
                            showCurrentImageIndex(curl );
                         };
                 }
                
           }

------------------------------------HTML模板------------------

 <div class="Wbox" id="proImageContentDiv0">
      <div class="WZ">
        <p>页码：<span id="proImagePageIndex0">0</span>of<span id="proImageCount0">0</span></p>
      </div>
      <div class="C">
        <div class="one"><input type="image" class="Button6" src="http://www.mainaer.com/skin/mainaer/images/button_l.gif" id="bigPicPre0"></div>
        <div style="float:left;">
          <div class="two"><a target="_blank" style="vertical-align:middle" id="bigImageCnt0"><img src="http://www.mainaer.com/uploadfiles/mainaer/loading1.gif" width="100" height="100"></a></div>
        </div>
        <div class="three"><input type="image" class="Button7" src="http://www.mainaer.com/skin/mainaer/images/button_r.gif" id="bigPicNxt0"></div>
      </div>
      <div style="clear:both;"></div>
      <div class="Bbox">
        <div class="BBC">
          <div class="BL"><input type="image" class="Button8" src="http://www.mainaer.com/skin/mainaer/images/button_l2.gif" id="smlPicPre0"></div>
          <div class="BC" id="smlImageContent0"></div>
          <div class="BR"><input type="image" class="Button9" src="http://www.mainaer.com/skin/mainaer/images/button_r2.gif" id="smlPicNxt0"></div>
        </div>
      </div>
    </div>

----------------------------调用方法-----------------------

var h1=[];             imageGally({targetDivId:"#proImageContentDiv0",

currentImageIndex:"#proImagePageIndex0",

totalImage:"#proImageCount0",

bigImagePre:"#bigPicPre0",bigImageNxt:"#bigPicNxt0",bigImageCnt:"#bigImageCnt0",smlImagePre:"#smlPicPre0",smlImageNxt:"#smlPicNxt0",smlImageCnt:"#smlImageContent0",

dataSrc :h0,MaxWidth:530,MaxHight:350});

--------------------效果展示页面：-----------------------

http://hangzhou.mainaer.com/shangchengqu/4.htm