(function(){
DOM.ready(function(){
var doms = document.getElementsByClassName("trs-high-defi-pics");
for(var i = 0; i < doms.length; i++){
var box = doms[i];
initHighDefPic(box);
}
Event.observe(document.body,'click', dowithButtonClick);
Event.observe(document.body,'mouseover', scrollThumbImg);
Event.observe(document.body,'mouseout', stopScroll);
});
})();
function initHighDefPic(box){
var showImgEl = document.getElementsByClassName("pic",box)[0];
var hiddenEl = document.getElementsByClassName("autoSwitchTime",box)[0];
var autoChangeImgTime = parseInt(hiddenEl.value)*1000;
var picHeight = document.getElementsByClassName("picHeight",box)[0].value;
picHeight = parseInt(picHeight)?(parseInt(picHeight)+"px"):"auto";
var picWidth = document.getElementsByClassName("picWidth",box)[0].value;
picWidth = parseInt(picWidth)?(parseInt(picWidth)+"px"):"auto";
changeShowImg(showImgEl,0);
var showImgElParent = document.getElementsByClassName("image",box)[0];
var showImgEl = document.getElementsByClassName("pic",box)[0];showImgEl.style.height = picHeight;showImgEl.style.width = picWidth;
autoShowImg(showImgElParent,autoChangeImgTime);
}
function autoShowImg(showImgElParent,autoChangeImgTime){
autoChangeImgTime = autoChangeImgTime || 10000 ;
var showImgElParentId = showImgElParent.id;
var thumbnailEl = $(showImgElParentId+"-thumb");
var thumbnailImgs = document.getElementsByClassName('img',thumbnailEl);thumbnailImgs[0].style.border ="2px solid white";
var boxEl = findItem(showImgElParent,'boxCls');
boxEl.autoChange = setInterval(function(showImgElParent){
var showImgEl = showImgElParent.getElementsByTagName("img")[0];
changeShowImg(showImgEl, 1);
}.bind(window,showImgElParent),autoChangeImgTime);
}
function changeShowImg(currShowImg, director){
var targetThumbImgEl = findTargetImg(currShowImg, director);
if(targetThumbImgEl == null){
return;
}
changeShowImgToTarget(currShowImg, targetThumbImgEl);
}
function changeShowImgToTarget(currShowImg, targetThumbImg){ currShowImg.src = targetThumbImg.src;
var targetIndex = targetThumbImg.getAttribute("index");
currShowImg.setAttribute("index", targetIndex);
changeDesc(currShowImg, targetThumbImg);
var currShowImgId = currShowImg.id;
var thumbnailEl = $(currShowImgId+"-thumb");
var thumbnailImgs = document.getElementsByClassName('img',thumbnailEl);
for(var i = 0;i thumbImgs.length){
return thumbImgs[0];
}
if(targetIndex < 1){
return thumbImgs[thumbImgs.length-1];
}
for(var i=0;i h ? -1: 1;
clearInterval(e.si);
e.si=setInterval(function(){tw(e,h,redirect,s)},10);
}
function tw(e, targetHeight, redirect, s) {
var currHeight = e.offsetHeight;
//如果當前的高度與目標的高度一致,則停止處理
if(currHeight==targetHeight){
clearInterval(e.si)
}else{
//否則改變其高度
e.style.height= currHeight + (Math.ceil(Math.abs(targetHeight-currHeight)/s)*redirect)+'px';
}
}
function showDesc(el){
el.style.height = "auto";
var height = el.offsetHeight;
el.style.height = 1;
set(el,height, 5);
}
function hideDesc(el){
set(el,0,5);
}
/*圖片描述區浮動結束*/
/*圖片滾動開始*/
function scrollThumbImg(eve){
//var currEvent = eve || window.eve;
//var targetEl = currEvent.target || currEvent.srcElement;
var targetEl = Event.element(eve);
var className = targetEl.className;
var thumbnailDv = findItem(targetEl,"thumbnailDv");
var wrapDv = document.getElementsByClassName("wrapDv",thumbnailDv)[0];
var thumbnails = document.getElementsByClassName('img',thumbnailDv);
var thumbnailCount = thumbnails.length;
var boxEl = findItem(wrapDv,'boxCls');
if(className == "thumbnailDv1"){
boxEl.scrollTime1 = setInterval(function(){srool2Right(wrapDv,thumbnailCount);},10);
}
if(className == "thumbnailDv2"){
boxEl.scrollTime2 = setInterval(function(){sroll2Left(wrapDv,thumbnailCount)},10);
}
if(Element.hasClassName(targetEl,"preimg") || Element.hasClassName(targetEl,"nextimg")){
Element.removeClassName(targetEl,"first");
Element.addClassName(targetEl,"last");
}
}
/*圖片滾動結束*/
function stopScroll(eve){
var targetEl = Event.element(eve);
var boxEl = findItem(targetEl,'boxCls');
var className = targetEl.className;
if(className == "thumbnailDv1"){
clearInterval(boxEl.scrollTime1);
}
if(className == "thumbnailDv2"){
clearInterval(boxEl.scrollTime2);
}
if(Element.hasClassName(targetEl,"preimg") || Element.hasClassName(targetEl,"nextimg")){
Element.removeClassName(targetEl,"last");
Element.addClassName(targetEl,"first");
}
}
function sroll2Left(wrapDv,thumbnailCount){
var widths = thumbnailCount*(4*2+100)-100;
if(wrapDv.scrollLeft > widths){
return;//作判斷,假如顯示的是最後一個圖片的話,就停止滾動
}
wrapDv.scrollLeft += 5;
}
function srool2Right(wrapDv,thumbnailCount){
var widths = thumbnailCount*(16*2+100)-100;
if(wrapDv.scrollLeft <=5){
return;//假如wrapDv元素的scrollLeft屬性小於5的話,就停止滾動
}
wrapDv.scrollLeft -= 5;
}