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
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