个性弧形控制按钮的js幻灯图片代码

特效介绍

使用方法

<link href="css/5imoban.net.css" type="text/css" rel="stylesheet">

<div class=box>
    <div class=FocusImg style="Z-INDEX: 200; POSITION: relative">
        <div class=BigPic id=BigPic>
        <A href="http://www.5imoban.net" target=_blank><IMG style="FILTER: revealTrans(duration=1,transition=23)" alt="运算核心 热门智能手机CPU解析" src="images/U4373P2T671D1F21271DT20110113090022.jpg" galleryimg="no"></A>    </div>
        <div class=TitleBg id=TitleBg></div>
        <div class=TitleBox id=TitleBox>运算核心 热门智能手机CPU解析</div>
    </div>
    <div class=SmallPics id=SmallPics></div>
</div>
<SCRIPT language=javascript type=text/javascript>
var FocusPic=function(BigPicID,SmallPicsID,TitleID,width,height){this.Data=[];this.ImgLoad=[];this.TimeOut=5000;var isIE=navigator.appVersion.indexOf("MSIE")!=-1?true:false;this.width=width;this.height=height;this.adNum=0;var TimeOutObj;if(!FocusPic.childs){FocusPic.childs=[]};this.showTime=null;this.showSum=10;this.ID=FocusPic.childs.push(this)-1;this.Add=function(BigPic,SmallPic,Title,Url){var ls;this.Data.push([BigPic,SmallPic,Title,Url]);ls=this.ImgLoad.length;this.ImgLoad.push(new Image);this.ImgLoad[ls].src=BigPic};this.TimeOutBegin=function(){clearInterval(TimeOutObj);TimeOutObj=setInterval("FocusPic.childs["+this.ID+"].next()",this.TimeOut)};this.TimeOutEnd=function(){clearInterval(TimeOutObj)};this.select=function(num){if(num>this.Data.length-1){return};if(num==this.adNum){return};this.TimeOutBegin();if(BigPicID){if(this.$(BigPicID)){var aObj=this.$(BigPicID).getElementsByTagName("a")[0];aObj.href=this.Data[num][2];if(this.aImgY){this.aImgY.style.display='none';this.aImg.style.position="relative";this.aImg.style.left=0;this.aImg.style.top=0;this.aImg.style.zIndex=0};this.aImgY=this.$('F'+this.ID+'BF'+this.adNum);this.aImg=this.$('F'+this.ID+'BF'+num);clearTimeout(this.showTime);this.showSum=10;this.showTime=setTimeout("FocusPic.childs["+this.ID+"].show()",10)}};if(TitleID){if(!this.Data[num][3]){this.$("TitleBg").style.opacity=0;this.$("TitleBg").style.filter="Alpha(Opacity=0)";this.$(TitleID).innerHTML="";}else{if(this.$(TitleID)){this.$("TitleBg").style.opacity=0.6;this.$("TitleBg").style.filter="Alpha(Opacity=60)";this.$(TitleID).innerHTML="<a href=\""+this.Data[num][2]+"\" target=\"_blank\">"+this.Data[num][3]+"</a>";}}};if(SmallPicsID){if(this.$(SmallPicsID)){var sImg=this.$(SmallPicsID).getElementsByTagName("span"),i;for(i=0;i<sImg.length;i++){if(i==num||num==(i-this.Data.length)){sImg[i].className="selected"}else{sImg[i].className=""}}}};if(this.onselect){this.onselect()};this.adNum=num};var absPosition=function(obj,parentObj){var left=obj.offsetLeft,top=obj.offsetTop,tempObj=obj;while(tempObj.id!="VBody"&tempObj.id!="VHtml"&tempObj!=parentObj){tempObj=tempObj.offsetParent;left+=tempObj.offsetLeft;top+=tempObj.offsetTop};return{left:left,top:top}};this.show=function(){this.showSum--;this.aImgY.style.display='block';this.aImg.style.position="absolute";var XY=absPosition(this.aImgY,this.$(BigPicID));this.aImg.style.top=XY.top+"px";this.aImg.style.left=XY.left+"px";this.aImg.style.display='block';if(isIE){this.aImg.style.filter="alpha(opacity=0)";this.aImg.style.filter="alpha(opacity="+(10-this.showSum)*10+")"}else{this.aImg.style.opacity=0;this.aImg.style.opacity=(10-this.showSum)*0.1};if(this.showSum<=0){this.aImgY.style.display='none';this.aImg.style.position="relative";this.aImg.style.left=0;this.aImg.style.top=0;this.aImg.style.zIndex=0;this.aImgY=null}else{this.aImg.style.zIndex=2;this.showTime=setTimeout("FocusPic.childs["+this.ID+"].show()",10)}};this.next=function(){var temp=this.adNum;temp++;if(temp>=this.Data.length){temp=0};this.select(temp)};this.MInStopEvent=function(ObjID){if(ObjID){if(this.$(ObjID)){if(this.$(ObjID).attachEvent){this.$(ObjID).attachEvent("onmouseover",Function("FocusPic.childs["+this.ID+"].TimeOutEnd()"));this.$(ObjID).attachEvent("onmouseout",Function("FocusPic.childs["+this.ID+"].TimeOutBegin()"))}else{this.$(ObjID).addEventListener("mouseover",Function("FocusPic.childs["+this.ID+"].TimeOutEnd()"),false);this.$(ObjID).addEventListener("mouseout",Function("FocusPic.childs["+this.ID+"].TimeOutBegin()"),false)}}}};this.begin=function(){this.MInStopEvent(TitleID);this.MInStopEvent(SmallPicsID);this.MInStopEvent(BigPicID);this.adNum=0;var i,temp="";if(BigPicID){if(this.$(BigPicID)){var aObj=this.$(BigPicID).getElementsByTagName("a")[0];aObj.style.zoom=1;this.$(BigPicID).style.position="relative";for(i=0;i<this.Data.length;i++){temp+='<img src="'+this.Data[i][0]+'" id="F'+this.ID+'BF'+i+'" style="display:'+(i==this.adNum?'block':'none')+'" galleryimg="no"'+(this.width?' width="'+this.width+'"':'')+(this.height?' height="'+this.height+'"':'')+' alt="'+this.Data[i][3]+'" />'};aObj.innerHTML=temp}};if(SmallPicsID){if(this.$(SmallPicsID)){temp="";for(i=0;i<this.Data.length;i++){temp+="<span id=focus_small"+i+(this.adNum==i?' class="selected"':"")+"><a href=\""+this.Data[i][2]+"\" target=\"_blank\"  onmouseover=\"FocusPic.childs["+this.ID+"].select("+i+")\">"+(i+1)+"</a></span>"};this.$(SmallPicsID).innerHTML=temp}};this.TimeOutBegin()};this.$=function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}};
var FocusPic_01 = new FocusPic("BigPic","SmallPics","TitleBox");
FocusPic_01.Add('images/U4373P2T671D1F21271DT20110113090022.jpg','images/U4373P2T671D1F21271DT20110113090022.jpg',"http://www.5imoban.net","网易女性美容幻灯片动画");
FocusPic_01.Add('images/U2679P2T671D1F21269DT20110114091857.jpg','images/U2679P2T671D1F21269DT20110114091857.jpg',"http://www.5imoban.net","google2010年圣诞节logo动画设计制作");
FocusPic_01.Add('images/U5311P2T671D1F21270DT20110114084718.jpg','images/U5311P2T671D1F21270DT20110114084718.jpg',"http://www.5imoban.net","腾讯qq群相册动画设计制作");
FocusPic_01.Add('images/U803P2T671D1F21268DT20101208163218.jpg','images/U803P2T671D1F21268DT20101208163218.jpg',"http://www.5imoban.net","“网易许愿墙动画设计制作");
FocusPic_01.begin();
</SCRIPT>