图片滑动控件（电视端）

function ViewPhoto(data)
{
this.data = data;
this.container = "photoPic";
this.pageSize = 1;
this.listSize = 1;
this.dataIndex = 0;
this.focusIndex = 0;
this.pageNow = 1;
this.pageTot = 1;
this.dataSet = ["photourl_b","photoname"];
this.getJsonValue = function (object, attribute)
{ 
   if(attribute == "" || !attribute)
{
return "";
}
return eval("object"+ "." + attribute) ;
}
this.getStyle = function(obj,styleName)
{
var gotStyle = "";
if(document.defaultView)
{
gotStyle = document.defaultView.getComputedStyle(obj,null)[styleName];//firefox
}
else
{
gotStyle = obj.currentStyle[styleName];//ie
}
return gotStyle;
}
this.init = function()
{
document.getElementById(this.container).innerHTML = "";
this.listSize = Math.min(this.data.length,this.pageSize);
var newul = document.createElement("ul");
var licon = document.createDocumentFragment();
for(var i=0;i<this.listSize;i++)
{
//设定数据索引值
var index = (i-this.focusIndex+this.dataIndex+this.data.length)%this.data.length;
var newli = document.createElement("li");
newli.innerHTML = "<table><tr><td></td></tr></table>";
var newimg = document.createElement("img");
newimg.setAttribute("src",this.getJsonValue(this.data[index],this.dataSet[0]));
//newimg.setAttribute("width","1280px");
//newimg.setAttribute("height","720px");
newli.getElementsByTagName("td")[0].appendChild(newimg);
//this.createLoading();
//图片初始化设置(包括对图片大小缩放、加载提示)
var $this = this;
newimg.onload = function()
{

var rateHeight = parseInt(newimg.height)/720;
var rateWidth = parseInt(newimg.width)/1280;
var rateAdjustSize = Math.max(rateHeight,rateWidth);
if(rateAdjustSize > 1)
{
if(rateHeight == rateAdjustSize)
{
newimg.style.height = "720px";
}
else
{
newimg.style.width = "1280px";
}
}
//$this.removeLoading();
}
licon.appendChild(newli);
}
newul.appendChild(licon);
document.getElementById(this.container).appendChild(newul);

this.showPhotoMsg();
}
this.showPhotoMsg = function(pressEnter)
{
// window.clearTimeout(this.bartimer);
// if(this.viewStyle == "手动" || pressEnter)
// {
// document.getElementById("msg_tip").style.display = "block";
// }
if(this.data.length>0){
//更新图片文字信息
$("photoName").innerHTML=this.data[this.dataIndex].photoname;
$("pageInfo").innerHTML= this.dataIndex+1+"/"+this.data.length;


}else{
$("photoName").innerHTML="";
$("pageInfo").innerHTML= "0/0"
}
// this.pageNow = this.dataIndex + 1;
// this.pageTot = Math.ceil(this.data.length/this.pageSize);
// document.getElementById("photo_name").innerHTML = this.getJsonValue(this.data[this.dataIndex],this.dataSet[1]);//图片名称
// this.pageNow = this.dataIndex + 1 ;
// document.getElementById("pc").innerHTML = this.pageNow;//图片名称
// document.getElementById("pt").innerHTML = this.pageTot;//图片名称
//自动隐藏图片文字信息栏
//this.bartimer = window.setTimeout(function(){document.getElementById("msg_tip").style.display = "none";},5000);

}
this.viewStyle = "自动";
this.setViewStyle = function(type)
{
this.viewStyle = type == 0 ? "自动" : "手动";
//document.getElementById("view_style").getElementsByTagName("span")[0].innerHTML = this.viewStyle;
var $this = this;
if(this.viewStyle == "自动")
{
this.autoViewStyle = window.setInterval(function(){$this.showNextPhoto()},intervarTime);
}
else
{
window.clearInterval($this.autoViewStyle);
}
//this.showPhotoMsg(true);
}


this.moveFlag = true;
this.showNextPhoto = function()
{
if(this.moveFlag == false)
{
return;
}
this.moveFlag = false;

this.dataIndex++;
this.dataIndex= this.dataIndex %this.data.length;
this.dataIndex = this.dataIndex < 0 ? this.dataIndex+this.data.length : this.dataIndex;

var referUl = document.getElementById(this.container).getElementsByTagName("ul")[0];
var referLi = document.getElementById(this.container).getElementsByTagName("li")[0];
var referLiTop = parseInt(this.getStyle(referLi,"top"));
var referLiLeft = parseInt(this.getStyle(referLi,"left"));
var referLiWidth = parseInt(this.getStyle(referLi,"width"));


//设定数据索引值
var index = (0-this.focusIndex+this.dataIndex+this.data.length)%this.data.length;

var newli = document.createElement("li");
newli.style.top = referLiTop + "px";
newli.style.left = (referLiLeft + referLiWidth) + "px";
newli.innerHTML = "<table><tr><td></td></tr></table>";
var newimg = document.createElement("img");
//newimg.setAttribute("width","1280px");
//newimg.setAttribute("height","720px");
newimg.setAttribute("src",this.getJsonValue(this.data[index],this.dataSet[0]));
newli.getElementsByTagName("td")[0].appendChild(newimg);
referUl.appendChild(newli);
//this.createLoading();
//图片初始化设置(包括对图片大小缩放、加载提示)
var $this = this;
newimg.onload = function()
{
//更新图片文字信息
$this.showPhotoMsg();

var rateHeight = parseInt(newimg.height)/720;
var rateWidth = parseInt(newimg.width)/1280;
var rateAdjustSize = Math.max(rateHeight,rateWidth);
if(rateAdjustSize > 1)
{
if(rateHeight == rateAdjustSize)
{
newimg.style.height = "720px";
}
else
{
newimg.style.width = "1280px";
}
}
//$this.removeLoading();

//图片移出
var startVal = 0;
var stopVal = -referLiWidth;
var nowVal = 0;
var moveElement = referUl;
$this.timer = window.setInterval(function()
{
nowVal = 0.3*(stopVal-startVal);
nowVal = nowVal > 0 ? Math.ceil(nowVal) : Math.floor(nowVal);
moveElement.style.left = parseInt($this.getStyle(moveElement,"left")) + nowVal + "px";
startVal += nowVal;
if(startVal == stopVal)
{
referLi.getElementsByTagName("img")[0].setAttribute("src","");
referLi.parentNode.removeChild(referLi);
$this.moveFlag = true;
window.clearInterval($this.timer);
}
},1);
}

}
this.showPrevPhoto = function()
{
if(this.moveFlag == false)
{
return;
}
this.moveFlag = false;

this.dataIndex--;
this.dataIndex %= this.data.length;
this.dataIndex = this.dataIndex < 0 ? this.dataIndex+this.data.length : this.dataIndex;

var referUl = document.getElementById(this.container).getElementsByTagName("ul")[0];
var referLi = document.getElementById(this.container).getElementsByTagName("li")[0];
var referLiTop = parseInt(this.getStyle(referLi,"top"));
var referLiLeft = parseInt(this.getStyle(referLi,"left"));
var referLiWidth = parseInt(this.getStyle(referLi,"width"));


//设定数据索引值
var index = (this.listSize-this.focusIndex+this.dataIndex+this.data.length-1)%this.data.length;

var newli = document.createElement("li");
newli.style.top = referLiTop + "px";
newli.style.left = (referLiLeft - referLiWidth) + "px";
newli.innerHTML = "<table><tr><td></td></tr></table>";
var newimg = document.createElement("img");
newimg.setAttribute("src",this.getJsonValue(this.data[index],this.dataSet[0]));
//newimg.setAttribute("width","1280px");
//newimg.setAttribute("height","720px");
newli.getElementsByTagName("td")[0].appendChild(newimg);
referUl.appendChild(newli);
//this.createLoading();
//图片初始化设置(包括对图片大小缩放、加载提示)
var $this = this;
newimg.onload = function()
{
//更新图片文字信息
$this.showPhotoMsg();

var rateHeight = parseInt(newimg.height)/720;
var rateWidth = parseInt(newimg.width)/1280;
var rateAdjustSize = Math.max(rateHeight,rateWidth);
if(rateAdjustSize > 1)
{
if(rateHeight == rateAdjustSize)
{
newimg.style.height = "720px";
}
else
{
newimg.style.width = "1280px";
}
}
//$this.removeLoading();

//图片移出
var startVal = 0;
var stopVal = referLiWidth;
var nowVal = 0;
var moveElement = referUl;
$this.timer = window.setInterval(function()
{
nowVal = 0.3*(stopVal-startVal);
nowVal = nowVal > 0 ? Math.ceil(nowVal) : Math.floor(nowVal);
moveElement.style.left = parseInt($this.getStyle(moveElement,"left")) + nowVal + "px";
startVal += nowVal;
if(startVal == stopVal)
{
referLi.getElementsByTagName("img")[0].setAttribute("src","");
referLi.parentNode.removeChild(referLi);
$this.moveFlag = true;
window.clearInterval($this.timer);
}
},1);
}

}


}