/*
*组图图集显示处理js
*版本：v1.0
*作者：xf
*日期：2011-7-05
*/
function vsbGallery()
{
_this = this;
///////////外部传递的编号/////////
this.pagepicimgsid; //图片 编号
this.pagepicthumbimgsid; //缩略图片 编号
this.pagepictitlesid; //组图标题 编号
this.pagepiccontentsid; //组图内容 编号
this.currenttotalsizeid; //当前页和总页数 编号
this.imgcontentid; //大图 编号
this.titlecontentid; //标题 编号
this.desccontentid; //内容 编号
this.thumbleftimgsid; //缩略图上一页 编号
this.thumbrightimgsid; //缩略图下一页 编号
this.thumbimgcontentid; //缩略图内容 编号
this.previousimgid; //上一个图片 编号
this.nextimgid; //下一个图片 编号
this.startautoplayid; //自动播放 编号
this.stopautoplayid; //停止播放 编号
this.tdnextid;//td上一页下一页编号
//////////////////////////////
/////////外部js对象///////// this.preloadimgs; //vsb vsbpreloadimg.js 图片缩略对象
////////////////////////////
///////////可以设置的资源///////// this.imgwidth=480; //显示大图图片宽度 this.imgheight=380;//显示大图图片高度
this.imgstyle="border:2px solid #eee;border-bottom-color:#999;border-right-color:#999;";//显示大图图片样式
this.leftcur="/system/resource/js/gallery/arr_left.cur"; //上一页手形
this.rightcur="/system/resource/js/gallery/arr_right.cur"; //下一页手形
this.iscycle= true; //是否图片循环
this.loadingimg = "/system/resource/images/loading.gif"; //读取中图片
this.isstretch = false; //是否变形
this.iszoomin = false; //是否放大
this.thumbimgsize = 5; //缩略图显示数量 this.thumbimgwidth = 120; //缩略图显示宽度 this.thumbimgheight = 80; //缩略图显示高度 this.thumbtdstyle="2px solid red"; //缩略图选中边框样式
this.thumbtdstyle0="2px solid white"; //缩略图选中边框样式
this.autostarttimes = 3000;//自动播放间隔时间 毫秒
this.previousurl = ""; //上一页地址 iscycle 为false时起效
this.nextimgurl = ""; //下一页地址 iscycle 为false时起效 this.showpagesign = "/";//中间间隔符号
this.showpagefront = "(";//当前页前显示字符串
this.showpageback = ")";//当前页后显示字符串
this.currentshowpagecolor = "red";//当前页颜色
this.istdnext = false; // 是否td显示上一页下一页
////////////////////////
///////////存放数据对象///////// this.pagepicimgs;; //显示的大图数据数组 this.pagepicthumbimgs; //图片缩略图数据数组 this.pagepictitles; //图片标题数据 this.pagepiccontents; //图片简介内容数据
///////////////////////////////////
/////////逻辑操作///////// this.currentindex=0; //当前显示的索引号
this.totalsize=0; //总的数量
this.imgid = "__showimgcontentid_"+parseInt(Math.random()*100+1); //大图图片显示时的编号
this.thumbimgid = "__showthumbimgcontentid_"+parseInt(Math.random()*100+1)+"_"; //缩略图图片编号组
this.thumbfill = 4; //缩略图滚动时填充值
this.thumbmovelock = false; //缩略图滚动时锁定
this.thumbspeed = 10; //速度(毫秒) this.thumbspace = 10; //每次移动距离 this.thumbcomp = 0; //已经移动距离 this.thumbisleft = false; //滚动方向
this.selectthumbimgid = ""; //被选中的缩略图编号
this.thumbisclick=false; //是否点击了缩略图的滚动
this.autoplayobj; //自动播放对象
this.imageshowintervaltime = 10;
////////////////////////
}
vsbGallery.prototype ={ test:function()
{
},
//外部调用的显示
show:function()
{
_this.addEvent(window,"load",_this.initpara,true);
},
//初始化数据
initpara:function()
{
_this.pagepicimgs = _this.$(_this.pagepicimgsid).getElementsByTagName("span");
_this.totalsize = _this.pagepicimgs.length;
_this.pagepicthumbimgs = _this.$(_this.pagepicthumbimgsid).getElementsByTagName("span");
_this.pagepictitles = _this.$(_this.pagepictitlesid).getElementsByTagName("span");
_this.pagepiccontents = _this.$(_this.pagepiccontentsid).getElementsByTagName("textarea");
_this.preloadimgs = new VsbPreloadImgArray(); _this.showimgcontent();
_this.showthumbimgcontent();
_this.registerevent();
},
//真实显示图片内容的方法
showrealimgcontent:function()
{
var showimgcontent = _this.$(_this.imgcontentid);
if(showimgcontent && _this.pagepicimgs.length>0)
{
var imgsrc = _this.pagepicimgs[_this.currentindex].innerHTML;
showimgcontent.innerHTML="![]("+_this.loadingimg+")
";
_this.preloadimgs.addImg(imgsrc, _this.imgid, _this.onimgload);
if(_this.istdnext)
{
_this.addEvent(_this.$(_this.tdnextid),"mouseover",_this.uptdnext,true); }else
{
_this.addEvent(_this.$(_this.imgid),"mouseover",_this.upimgnext,true); }
} _this.showcurrenttotalsize(); _this.showcurrenttitle();
_this.showcurrentcontent();
_this.removethumbimgtdstyle(_this.selectthumbimgid)
_this.setthumbimgtdstyle(_this.currentindex);
},
//显示内容
showimgcontent:function()
{
//改为延时一段时间显示，不然狂点页面会出现未知错误
setTimeout('_this.showrealimgcontent()',_this.imageshowintervaltime); },
//加载大图图片
onimgload:function(img,imgid)
{
var imgobj = _this.$(imgid);
img.showImg(imgobj, imgobj.getAttribute("showwidth"),imgobj.getAttribute("showheight"),_this.isstretch,_this.iszoomin);
},
//加载缩略图
onthumbimgload:function(img,imgid)
{
var imgobj = _this.$(imgid);
img.showImg(imgobj, imgobj.getAttribute("showwidth"),imgobj.getAttribute("showheight"));
},
//td事件
uptdnext:function()
{
var showtd =_this.$(_this.tdnextid);
//初始化执行
var isleft = _this.showtdcursor(showtd);
showtd.onmouseover=function()
{
isleft = _this.showtdcursor(showtd);
}
showtd.onmousemove=function()
{
isleft = _this.showtdcursor(showtd);
}
showtd.onclick=function(){
_this.handleimgnext(isleft);
}
}, //显示td手形
showtdcursor:function(tdobj)
{
var width = tdobj.clientWidth;
var isleft = false;
var evt = _this.getEvent();
var eventwidth = evt.clientX-_this.tgetAbsLeft(tdobj);
return _this.showcursor(tdobj,width,eventwidth);
},
//显示手形
showcursor:function(obj,objwidth,eventwidth)
{
if(eventwidth< parseInt(objwidth/2)){
obj.style.cursor = 'url('+_this.leftcur+'),auto';
return true;
}
else
{
obj.style.cursor = 'url('+_this.rightcur+'),auto';
return false;
}
},
//图像事件
upimgnext:function()
{
var showimg =_this.$(_this.imgid);
//初始化执行
var isleft = _this.showimgcursor(showimg);
showimg.onmouseover=function()
{
isleft = _this.showimgcursor(showimg);
}
showimg.onmousemove=function()
{
isleft = _this.showimgcursor(showimg);
}
showimg.onclick=function(){
_this.handleimgnext(isleft);
}
},
//显示img手形
showimgcursor:function(imgobj)
{
var width = imgobj.width;
var isleft = false;
var evt=_this.getEventOffset() ;
return _this.showcursor(imgobj,width,evt[0]);
},
//处理点击
handleimgnext:function(isleft)
{
//向左
if(isleft)
{
_this.previousimg()
}
//向右
else
{
_this.nextimg();
}
},
//上一个图片 previousimg:function()
{
var previousindex = (parseInt(_this.currentindex)-1);
if(previousindex>=0)
{
_this.currentindex = parseInt(_this.currentindex)-1;
if(_this.thumbisclick)
{
_this.scrolltoimage(); _this.thumbisclick=false;
}else
{
_this.thumbmovelock = true;
_this.thumbisleft =true;
_this.scrollimage() }
}
else
{
if(_this.iscycle)
{
_this.scrolltoend(); _this.currentindex = parseInt(_this.totalsize) -1;
}else
{
if(_this.previousurl!="")
{
_this.topage(_this.previousurl);
}
}
}
_this.showimgcontent();
},
//下一个图片 nextimg:function()
{
var nextindex = (parseInt(_this.currentindex)+1);
if(nextindex<(parseInt(_this.totalsize)))
{ _this.currentindex = parseInt(_this.currentindex)+1; if(_this.thumbisclick)
{
_this.scrolltoimage(); _this.thumbisclick=false;
}else
{
if(_this.currentindex!=0 && ((_this.currentindex+1)%(_this.thumbimgsize)==0) )
{ _this.scrolltoimage(); }
} }
else
{
if(_this.iscycle)
{
_this.scrolltostart(); _this.currentindex = 0;
}else
{
if(_this.nextimgurl!="")
{
_this.topage(_this.nextimgurl);
} }
}
_this.showimgcontent(); }, //页面跳转
topage:function(pageurl)
{
window.location.href = pageurl;
},
//跳到某一张图片 arriveimg:function(toindex)
{
if(parseInt(toindex)>=0 && (parseInt(toindex)0)
{
var showcurrenttotalsizehtml = _this.showpagefront ;
if(_this.currentshowpagecolor!="")
{
showcurrenttotalsizehtml +=""
}
showcurrenttotalsizehtml += (parseInt(_this.currentindex)+1) if(_this.currentshowpagecolor!="")
{
showcurrenttotalsizehtml += "";
}
showcurrenttotalsizehtml +=_this.showpagesign
showcurrenttotalsizehtml +=_this.totalsize
showcurrenttotalsizehtml +=_this.showpageback; currenttotalsize.innerHTML= showcurrenttotalsizehtml;
}
}, //显示标题
showcurrenttitle:function()
{
var titlecontent = _this.$(_this.titlecontentid);
if(titlecontent && _this.pagepictitles.length>0)
{ var titlecontentvalue= _this.pagepictitles[_this.currentindex];
titlecontent.innerHTML = titlecontentvalue.innerHTML;
}
}, //显示内容
showcurrentcontent:function()
{
var desccontent = _this.$(_this.desccontentid);
if(desccontent && _this.pagepiccontents.length>0)
{ var desccontentvalue = _this.pagepiccontents[_this.currentindex];
desccontent.innerHTML = desccontentvalue.value;
} }, //去除缩略图边框样式
removethumbimgtdstyle:function(showindex)
{
var thumbimgcontent = _this.$(_this.thumbimgcontentid);
if(thumbimgcontent)
{
var selectimg = _this.$(_this.thumbimgid+showindex);
if(selectimg)
{ selectimg.parentNode.style.border=_this.thumbtdstyle0;
}
} },
//设置缩略图边框样式
setthumbimgtdstyle:function(showindex)
{
var thumbimgcontent = _this.$(_this.thumbimgcontentid);
if(thumbimgcontent)
{
var selectimg = _this.$(_this.thumbimgid+showindex);
if(selectimg)
{ selectimg.parentNode.style.border=_this.thumbtdstyle;
_this.selectthumbimgid = showindex;
}
} }, //显示缩略图
showthumbimgcontent:function()
{
var showthumbimgcontent = _this.$(_this.thumbimgcontentid);
if(showthumbimgcontent)
{
var result="";
for(var i=0;i";
result+="";
result+="";
}
result+="
";
showthumbimgcontent.style.width = ((_this.thumbimgwidth + _this.thumbfill)*_this.thumbimgsize)+"px";
showthumbimgcontent.style.overflow = "hidden";
showthumbimgcontent.style.margin = "0 auto;";
showthumbimgcontent.innerHTML = result;
for(var i=0;i<_this.pagepicthumbimgs.length;i++)
{
var imgsrc = _this.pagepicthumbimgs[i].innerHTML;
_this.preloadimgs.addImg(imgsrc, _this.thumbimgid+i, _this.onthumbimgload);
}
_this.setthumbimgtdstyle(_this.currentindex);
_this.registerscrollevent();
} },
//注册按钮事件
registerscrollevent:function()
{
var leftimage = _this.$(_this.thumbleftimgsid)
if(leftimage)
{
_this.addEvent(leftimage,"click",_this.scrollleft,true); }
var rightimage = _this.$(_this.thumbrightimgsid)
if(rightimage)
{
_this.addEvent(rightimage,"click",_this.scrollright,true); }
}, //注册页面事件 registerevent:function()
{
//上一页
var previousimg = _this.$(_this.previousimgid)
if(previousimg)
{
_this.addEvent(previousimg,"click",_this.previousimg,true); }
//下一页
var nextimg = _this.$(_this.nextimgid)
if(nextimg)
{
_this.addEvent(nextimg,"click",_this.nextimg,true); }
//自动播放
var startautoplay = _this.$(_this.startautoplayid)
if(startautoplay)
{
_this.addEvent(startautoplay,"click",_this.startautoplay,true); }
//停止播放
var stopautoplay = _this.$(_this.stopautoplayid)
if(stopautoplay)
{
_this.addEvent(stopautoplay,"click",_this.stopautoplay,true); } }, //向左滚动 scrollleft:function()
{
_this.thumbmovelock = true;
_this.thumbisleft =true;
_this.thumbisclick = true;
_this.scrollimage()
}, //向右滚动
scrollright:function()
{
_this.thumbmovelock = true;
_this.thumbisleft =false;
_this.thumbisclick = true;
_this.scrollimage() }, //缩略图滚动
scrollimage:function()
{
var thumbimgcontent = _this.$(_this.thumbimgcontentid);
if(thumbimgcontent)
{
if(_this.thumbmovelock==false)
{
return; }
var num=0;
num += parseInt(_this.thumbspace);
_this.thumbcomp += num;
if(_this.thumbisleft)
{
thumbimgcontent.scrollLeft -=num; }else
{
thumbimgcontent.scrollLeft+=num;;
}
if(_this.thumbcomp<_this.thumbimgwidth)
{
setTimeout('_this.scrollimage()',_this.thumbspeed); }
else
{
if(_this.thumbisleft)
{
thumbimgcontent.scrollLeft-=_this.thumbfill; }else
{
thumbimgcontent.scrollLeft+=_this.thumbfill; }
_this.thumbcomp=0;
_this.thumbmovelock=false;
}
} }, //缩略图点击处理
thumbshowimage:function(showindex)
{
_this.arriveimg(showindex)
_this.setthumbimgtdstyle(showindex); }, //缩略图跳转处理
scrolltoimage:function()
{
var thumbimgcontent = _this.$(_this.thumbimgcontentid);
if(thumbimgcontent)
{
var tosize;
tosize = parseInt (parseInt(_this.thumbimgwidth) * parseInt(_this.currentindex))+parseInt (parseInt(_this.thumbfill) * parseInt(_this.currentindex));
thumbimgcontent.scrollLeft =tosize;
} }, //缩略图滚动到尾
scrolltoend:function()
{
var thumbimgcontent = _this.$(_this.thumbimgcontentid);
if(thumbimgcontent)
{
var tosize = (_this.thumbimgwidth* _this.totalsize)+_this.thumbfill; if(_this.isFF())
{
tosize=tosize+10; }
thumbimgcontent.scrollLeft =tosize;
} }, //缩略图滚动到首 scrolltostart:function()
{
var thumbimgcontent = _this.$(_this.thumbimgcontentid);
if(thumbimgcontent)
{
thumbimgcontent.scrollLeft =0; } }, startautoplay:function()
{
_this.stopautoplay()
_this.autoplayobj = setInterval('_this.nextimg()', _this.autostarttimes); }, stopautoplay:function()
{
clearInterval(_this.autoplayobj ); }, //通用工具函数
$:function(element)//获取对象
{
return document.getElementById(element);
},
isFF:function(element)//当前浏览器是否是ff
{
return (navigator.userAgent.indexOf("Firefox")!=-1);
},
addEvent:function(elm, evType, fn, useCapture)//注册事件
{
if (elm.addEventListener)
{ elm.addEventListener(evType, fn, useCapture) return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn);
return r; }
else { elm['on' + evType] = fn;
} }, getEvent:function()//获取事件
{
if(document.all) return window.event; func=_this.getEvent.caller; while(func!=null)
{ var arg0=func.arguments[0]; if(arg0)
{ if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
{ return arg0; } } func=func.caller; } return null;
},
getOffset:function(evt)
{
var target = evt.target;
if (target.offsetLeft == undefined)
{
target = target.parentNode;
}
var pageCoord = _this.getPageCoord(target);
var eventCoord =
{ x: window.pageXOffset + evt.clientX,
y: window.pageYOffset + evt.clientY
};
var offset =
{
offsetX: eventCoord.x - pageCoord.x,
offsetY: eventCoord.y - pageCoord.y
};
return offset;
},
getPageCoord:function(element)
{
var coord = {x: 0, y: 0};
while (element)
{
coord.x += element.offsetLeft;
coord.y += element.offsetTop;
element = element.offsetParent;
}
return coord; },
getEventOffset:function()//兼容ff的获取evtOffsets方法
{
var evt = _this.getEvent();
var offestarray = new Array();
if (evt.offsetX == undefined)
{
var evtOffsets = _this.getOffset(evt);
offestarray.push(evtOffsets.offsetX);
offestarray.push(evtOffsets.offsetY);
}
else
{
offestarray.push(evt.offsetX);
offestarray.push(evt.offsetY);
}
return offestarray; } ,
tgetAbsLeft:function(e)//获取元素位于窗体left距离
{
var t=e.offsetLeft;
while(e=e.offsetParent)
t += e.offsetLeft;
return t; }
}