/** * 全屏幻灯片类 */ function SlideLfetRight(DivIdName){ //幻灯节点对象 this.DivObj=$("#"+DivIdName); //大图节点对象 this.DivBigImgObj=$("#"+DivIdName+" .list"); this.BigLiArrUl = $("#"+DivIdName+" .list ul"); this.BigLiArr=$("#"+DivIdName+" .list ul li"); //缩略图节点对象 this.next = $("#"+DivIdName+" .left"); this.prev = $("#"+DivIdName+" .right"); this.theWidth = this.DivObj.width(); this.DivObj.append("
"); this.DivThumbObj=$("#"+DivIdName+" .Thumb"); this.ThumbLiObj=null; this.fangxiang = "Left"; this.isHover = false; //其他设置 this.index=1; this.timeer=null; this.speed=5000;//切换速度 } /** * 初始化 */ SlideLfetRight.prototype.Init=function(n){ this.BigLiArrUl.css("width",(this.theWidth * (this.BigLiArr.length+2))); this.BigLiArr.css("width",this.theWidth); this.SetBigMarginLeft(); this.SetBtn(); this.BindEvt(); this.BigLiArrUl.append(this.BigLiArr.eq(0).clone()); this.BigLiArrUl.prepend(this.BigLiArr.last().clone()); this.BigLiArrUl.css("left",-(this.theWidth*this.index)); this.ShowOne(); this.BigLiArr=this.DivObj.find(" .list ul li"); this.Paly(); } /** * 设置大图距离左边的位置 */ SlideLfetRight.prototype.SetBigMarginLeft = function(){ var width = $(this.DivBigImgObj).width(); for (var i = 0; i < this.BigLiArr.length; i++) { this.SetSize(this.BigLiArr[i]); } } /*设置居中*/ SlideLfetRight.prototype.SetSize=function(LiObj) { var theWidht=parseInt($(this.DivBigImgObj).width(),10); var imgObj=$(LiObj).find("img").get(0); var width=parseInt($(imgObj).attr("oldW"),10); var height=parseInt($(imgObj).attr("oldH"),10); var nowHeight=parseInt($(imgObj).height(),10); var nowWidht=parseInt(width*nowHeight/height,10); var left=parseInt((theWidht-nowWidht)/2,10); $(imgObj).css({"left":left+"px"}); } /** * 设置按钮 */ SlideLfetRight.prototype.SetBtn = function(){ var width=parseInt(22 * this.BigLiArr.length, 10); var theHtml = "
"; for (var i = 0; i < this.BigLiArr.length; i++) { //theHtml += "
  • " + parseInt(i + 1, 10) + "
  • "; theHtml += "
  •  
  • "; } theHtml += "
    "; $(this.DivThumbObj).html(theHtml); $(this.DivThumbObj).css({marginLeft:"-"+parseInt(width/2,10)+"px"}); this.ThumbLiObj = $(this.DivThumbObj).find("li"); $(this.ThumbLiObj[0]).addClass("onfocus"); } /** * 为大图及按钮绑定事件 */ SlideLfetRight.prototype.BindEvt = function(){ var theObj = this; $(this.BigImgArr).hover(function(){ clearInterval(theObj.timeer); }, function(){ theObj.Paly(); }); $(this.ThumbLiObj).hover(function(){ clearInterval(theObj.timeer); theObj.index=parseInt($(this).attr("rel"),10)+1; theObj.ShowOne(); }, function(){ theObj.Paly(); }); this.next.click(function(){ clearInterval(theObj.timeer); theObj.index++; theObj.fangxiang = "Left"; theObj.ShowOne(); theObj.Paly(); }) this.prev.click(function(){ clearInterval(theObj.timeer); theObj.index--; theObj.fangxiang = "Right"; theObj.ShowOne(); theObj.Paly(); }) } /** * 播放 */ SlideLfetRight.prototype.Paly=function(){ var theObj=this; this.timeer=setInterval(function(){theObj.setPaly()},this.speed); } /*播放设置*/ SlideLfetRight.prototype.setPaly=function(){ if(this.fangxiang == "Left"){ this.index++; }else{ this.index--; } this.ShowOne(); } /** * 显示一个 */ SlideLfetRight.prototype.ShowOne=function(){ var theObj = this; theObj.BigLiArrUl.stop().animate({ "left":-(theObj.theWidth * theObj.index) },800,function(){ if(theObj.index > theObj.BigLiArr.length-2){ theObj.index = 1; theObj.BigLiArrUl.css("left",-(theObj.theWidth)); }else if(theObj.index < 1){ theObj.index = theObj.BigLiArr.length-2; theObj.BigLiArrUl.css("left",-(theObj.theWidth*(theObj.index))); } }) $(theObj.ThumbLiObj).removeClass("onfocus"); if(theObj.index > (theObj.ThumbLiObj.length)){ $(theObj.ThumbLiObj[0]).addClass("onfocus"); }else if(theObj.index < 1){ $(theObj.ThumbLiObj[theObj.ThumbLiObj.length-1]).addClass("onfocus"); }else{ $(theObj.ThumbLiObj[theObj.index-1]).addClass("onfocus"); } }