js用按钮控制的左右图片滚动特效

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"htmlxmlns="http://www.w3.org/1999/xhtml"headmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/titleJS图片滚动/titlestyleTABLE{BORDER-TOP-WIDTH:0px;PADDING-RIGHT:0px;PADDING-LEFT:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-TOP:0px;BORDER-RIGHT-WIDTH:0px}BODY{PADDING-RIGHT:0px;PADDING-LEFT:0px;FONT-SIZE:12px;BACKGROUND:#fff;PADDING-BOTTOM:5px;COLOR:#333;PADDING-TOP:5px;FONT-FAMILY:""}TD{FONT-SIZE:12px}.f12{FONT-SIZE:12px}A{TEXT-DECORATION:underline}A:link{COLOR:#0051b4}A:visited{COLOR:#333}A:hover{COLOR:#f00}A:active{COLOR:#f00}.F14lists{LINE-HEIGHT:23px}.F14listsUL{PADDING-RIGHT:3px;PADDING-LEFT:3px;PADDING-BOTTOM:0px;PADDING-TOP:0px}.F14listsLI{PADDING-LEFT:2px;FONT-SIZE:14px;VERTICAL-ALIGN:bottom}.F14listsLISPAN{FONT-SIZE:9px;COLOR:#533826}.FixTitleA:link{COLOR:#0736aa;TEXT-DECORATION:none}.FixTitleA:visited{COLOR:#0736aa;TEXT-DECORATION:none}.FixTitleA:hover{TEXT-DECORATION:underline}.FixTitle{BORDER-RIGHT:#a2d1ff1pxsolid;BORDER-TOP:#a2d1ff1pxsolid;BACKGROUND:url(/upload/images/net/2010-01/olyready_bg_cl_002.gif)0px-101px;OVERFLOW:hidden;BORDER-LEFT:#a2d1ff1pxsolid;LINE-HEIGHT:24px;BORDER-BOTTOM:#a2d1ff1pxsolid;HEIGHT:24px}.FixTitleH3{PADDING-LEFT:30px;FONT-SIZE:14px;BACKGROUND:url(/upload/images/net/2010-01/olyready_bg_cl_001.gif)2px-197px;FLOAT:left;COLOR:#0736aa}.FixTitleSPAN{PADDING-RIGHT:5px;FLOAT:right}.RForm{PADDING-RIGHT:10px;PADDING-LEFT:10px;PADDING-BOTTOM:10px;PADDING-TOP:10px}.RFormDT{LINE-HEIGHT:23px}.RformB{PADDING-LEFT:10px}.blk_29{BORDER-RIGHT:#a1d2fd1pxsolid;PADDING-RIGHT:0px;BORDER-TOP:#a1d2fd0pxsolid;PADDING-LEFT:0px;PADDING-BOTTOM:10px;OVERFLOW:hidden;BORDER-LEFT:#a1d2fd1pxsolid;PADDING-TOP:10px;BORDER-BOTTOM:#a1d2fd1pxsolid;ZOOM:1;POSITION:relative}.blk_29.LeftBotton{BACKGROUND:url(/upload/images/net/2010-01/ca_hz_002.gif)no-repeat0px0px;LEFT:5px;FLOAT:left;WIDTH:11px;CURSOR:pointer;POSITION:absolute;TOP:10px;HEIGHT:114px}.blk_29.RightBotton{RIGHT:5px;BACKGROUND:url(/upload/images/net/2010-01/ca_hz_002.gif)no-repeat-11px0px;FLOAT:right;WIDTH:11px;CURSOR:pointer;POSITION:absolute;TOP:10px;HEIGHT:114px}.blk_29.Cont{MARGIN:0pxauto;OVERFLOW:hidden;WIDTH:888px;PADDING-TOP:5px}.blk_29.box{FLOAT:left;WIDTH:152px;TEXT-ALIGN:center}.blk_29.boxIMG{BORDER-RIGHT:#add2fc1pxsolid;PADDING-RIGHT:3px;BORDER-TOP:#add2fc1pxsolid;DISPLAY:block;PADDING-LEFT:3px;BACKGROUND:#fff;PADDING-BOTTOM:3px;MARGIN:0pxauto;BORDER-LEFT:#add2fc1pxsolid;PADDING-TOP:3px;BORDER-BOTTOM:#add2fc1pxsolid}.blk_29.boxA:hoverIMG{BORDER-RIGHT:#5385cc1pxsolid;BORDER-TOP:#5385cc1pxsolid;BORDER-LEFT:#5385cc1pxsolid;BORDER-BOTTOM:#5385cc1pxsolid}.blk_29.boxP{MARGIN:6pxauto0px;WIDTH:97px;LINE-HEIGHT:20px}.rollphotos{MARGIN-TOP:10px;WIDTH:950px}.partC{MARGIN-TOP:10px;OVERFLOW:auto;WIDTH:950px}.partC.PC_left{OVERFLOW:auto;WIDTH:470px}.partC.PC_right{OVERFLOW:auto;WIDTH:470px}.partC.PC_left{FLOAT:left}.partC.PC_right{FLOAT:right}.PT_mix{BORDER-RIGHT:#a2d1ff1pxsolid;PADDING-RIGHT:0px;BORDER-TOP:#a2d1ff0pxsolid;PADDING-LEFT:0px;BACKGROUND:#f3fbfe;PADDING-BOTTOM:10px;OVERFLOW:auto;BORDER-LEFT:#a2d1ff1pxsolid;PADDING-TOP:0px;BORDER-BOTTOM:#a2d1ff1pxsolid}.PhoTxt{MARGIN-TOP:10px;DISPLAY:inline;FLOAT:left;MARGIN-LEFT:10px;OVERFLOW:auto;WIDTH:220px}.PhoTxtIMG{BORDER-RIGHT:#ccc1pxsolid;PADDING-RIGHT:3px;BORDER-TOP:#ccc1pxsolid;PADDING-LEFT:3px;BACKGROUND:#fff;FLOAT:left;PADDING-BOTTOM:3px;BORDER-LEFT:#ccc1pxsolid;MARGIN-RIGHT:5px;PADDING-TOP:3px;BORDER-BOTTOM:#ccc1pxsolid}.PhoTxtH1{FONT-WEIGHT:bold;FONT-SIZE:12px;LINE-HEIGHT:23px}.PhoTxtP{COLOR:#545454;LINE-HEIGHT:20px}/styleSCRIPTtype="text/javascript"varsina={$:function(objName){if(document.getElementById){returneval('document.getElementById("'+objName+'")')}else{returneval('document.all.'+objName)}},isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,addEvent:function(l,i,I){if(l.attachEvent){l.attachEvent("on"+i,I)}else{l.addEventListener(i,I,false)}},delEvent:function(l,i,I){if(l.detachEvent){l.detachEvent("on"+i,I)}else{l.removeEventListener(i,I,false)}},readCookie:function(O){varo="",l=O+"=";if(document.cookie.length0){vari=document.cookie.indexOf(l);if(i!=-1){i+=l.length;varI=document.cookie.indexOf(";",i);if(I==-1)I=document.cookie.length;o=unescape(document.cookie.substring(i,I))}};returno},writeCookie:function(i,l,o,c){varO="",I="";if(o!=null){O=newDate((newDate).getTime()+o*3600000);O=";expires="+O.toGMTString()};if(c!=null){I=";domain="+c};document.cookie=i+"="+escape(l)+O+I},readStyle:function(I,l){if(I.style[l]){returnI.style[l]}elseif(I.currentStyle){returnI.currentStyle[l]}elseif(document.defaultView&&document.defaultView.getComputedStyle){vari=document.defaultView.getComputedStyle(I,null);returni.getPropertyValue(l)}else{returnnull}}};functionScrollPic(scrollContId,arrLeftId,arrRightId,dotListId){this.scrollContId=scrollContId;this.arrLeftId=arrLeftId;this.arrRightId=arrRightId;this.dotListId=dotListId;this.dotClassName="dotItem";this.dotOnClassName="dotItemOn";this.dotObjArr=[];this.pageWidth=0;this.frameWidth=0;this.speed=10;this.space=10;this.pageIndex=0;this.autoPlay=true;this.autoPlayTime=5;var_autoTimeObj,_scrollTimeObj,_state="ready";this.stripDiv=document.createElement("DIV");this.listDiv01=document.createElement("DIV");this.listDiv02=document.createElement("DIV");if(!ScrollPic.childs){ScrollPic.childs=[]};this.ID=ScrollPic.childs.length;ScrollPic.childs.push(this);this.initialize=function(){if(!this.scrollContId){thrownewError("必须指定scrollContId.");return};this.scrollContDiv=sina.$(this.scrollContId);if(!this.scrollContDiv){thrownewError("scrollContId不是正确的对象.(scrollContId=\""+this.scrollContId+"\")");return};this.scrollContDiv.style.width=this.frameWidth+"px";this.scrollContDiv.style.overflow="hidden";this.listDiv01.innerHTML=this.listDiv02.innerHTML=this.scrollContDiv.innerHTML;this.scrollContDiv.innerHTML="";this.scrollContDiv.appendChild(this.stripDiv);this.stripDiv.appendChild(this.listDiv01);this.stripDiv.appendChild(this.listDiv02);this.stripDiv.style.overflow="hidden";this.stripDiv.style.zoom="1";this.stripDiv.style.width="32766px";this.listDiv01.style.cssFloat="left";this.listDiv02.style.cssFloat="left";sina.addEvent(this.scrollContDiv,"mouseover",Function("ScrollPic.childs["+this.ID+"].stop()"));sina.addEvent(this.scrollContDiv,"mouseout",Function("ScrollPic.childs["+this.ID+"].play()"));if(this.arrLeftId){this.arrLeftObj=sina.$(this.arrLeftId);if(this.arrLeftObj){sina.addEvent(this.arrLeftObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].rightMouseDown()"));sina.addEvent(this.arrLeftObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].rightEnd()"));sina.addEvent(this.arrLeftObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].rightEnd()"))}};if(this.arrRightId){this.arrRightObj=sina.$(this.arrRightId);if(this.arrRightObj){sina.addEvent(this.arrRightObj,"mousedown",Function("ScrollPic.childs["+this.ID+"].leftMouseDown()"));sina.addEvent(this.arrRightObj,"mouseup",Function("ScrollPic.childs["+this.ID+"].leftEnd()"));sina.addEvent(this.arrRightObj,"mouseout",Function("ScrollPic.childs["+this.ID+"].leftEnd()"))}};if(this.dotListId){this.dotListObj=sina.$(this.dotListId);if(this.dotListObj){varpages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),i,tempObj;for(i=0;ipages;i++){tempObj=document.createElement("span");this.dotListObj.appendChild(tempObj);this.dotObjArr.push(tempObj);if(i==this.pageIndex){tempObj.className=this.dotClassName}else{tempObj.className=this.dotOnClassName};tempObj.title="第"+(i+1)+"页";sina.addEvent(tempObj,"click",Function("ScrollPic.childs["+this.ID+"].pageTo("+i+")"))}}};if(this.autoPlay){this.play()}};this.leftMouseDown=function(){if(_state!="ready"){return};_state="floating";_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveLeft()",this.speed)};this.rightMouseDown=function(){if(_state!="ready"){return};_state="floating";_scrollTimeObj=setInterval("ScrollPic.childs["+this.ID+"].moveRight()",this.speed)};this.moveLeft=function(){if(this.scrollContDiv.scrollLeft+this.space=this.listDiv01.scrollWidth){this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+this.space-this.listDiv01.scrollWidth}else{this.scrollContDiv.scrollLeft+=this.space};this.accountPageIndex()};this.moveRight=function(){if(this.scrollContDiv.scrollLeft-this.space=0){this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-this.space}else{this.scrollContDiv.scrollLeft-=this.space};this.accountPageIndex()};this.leftEnd=function(){if(_state!="floating"){return};_state="stoping";clearInterval(_scrollTimeObj);varfill=this.pageWidth-this.scrollContDiv.scrollLeft%this.pageWidth;this.move(fill)};this.rightEnd=function(){if(_state!="floating"){return};_state="stoping";clearInterval(_scrollTimeObj);varfill=-this.scrollContDiv.scrollLeft%this.pageWidth;this.move(fill)};this.move=function(num,quick){varthisMove=num/5;if(!quick){if(thisMovethis.space){thisMove=this.space};if(thisMove-this.space){thisMove=-this.space}};if(Math.abs(thisMove)1&&thisMove!=0){thisMove=thisMove=0?1:-1}else{thisMove=Math.round(thisMove)};vartemp=this.scrollContDiv.scrollLeft+thisMove;if(thisMove0){if(this.scrollContDiv.scrollLeft+thisMove=this.listDiv01.scrollWidth){this.scrollContDiv.scrollLeft=this.scrollContDiv.scrollLeft+thisMove-this.listDiv01.scrollWidth}else{this.scrollContDiv.scrollLeft+=thisMove}}else{if(this.scrollContDiv.scrollLeft-thisMove=0){this.scrollContDiv.scrollLeft=this.listDiv01.scrollWidth+this.scrollContDiv.scrollLeft-thisMove}else{this.scrollContDiv.scrollLeft+=thisMove}};num-=thisMove;if(Math.abs(num)==0){_state="ready";if(this.autoPlay){this.play()};this.accountPageIndex();return}else{this.accountPageIndex();setTimeout("ScrollPic.childs["+this.ID+"].move("+num+","+quick+")",this.speed)}};this.next=function(){if(_state!="ready"){return};_state="stoping";this.move(this.pageWidth,true)};this.play=function(){if(!this.autoPlay){return};clearInterval(_autoTimeObj);_autoTimeObj=setInterval("ScrollPic.childs["+this.ID+"].next()",this.autoPlayTime*1000)};this.stop=function(){clearInterval(_autoTimeObj)};this.pageTo=function(num){if(_state!="ready"){return};_state="stoping";varfill=num*this.frameWidth-this.scrollContDiv.scrollLeft;this.move(fill,true)};this.accountPageIndex=function(){this.pageIndex=Math.round(this.scrollContDiv.scrollLeft/this.frameWidth);if(this.pageIndexMath.round(this.listDiv01.offsetWidth/this.frameWidth+0.4)-1){this.pageIndex=0};vari;for(i=0;ithis.dotObjArr.length;i++){if(i==this.pageIndex){this.dotObjArr[i].className=this.dotClassName}else{this.dotObjArr[i].className=this.dotOnClassName}}}};/SCRIPT/headbodydivalign="center"!--滚动图片start--DIVclass=rollphotosDIVclass=FixTitleH3旅游风景名胜/H3SPANAhref="/"target=_blank更多/A/SPAN/DIVDIVclass=blk_29DIVclass=LeftBottonid=LeftArr/DIVDIVclass=Contid=ISL_Cont_1!--图片列表begin--DIVclass=boxAclass=imgBorderhref="/"target=_blankIMGheight=84src="/upload/images/net/2010-01/wall_s1.jpg"width=124border=0/APAhref="/"target=_blank中国北京/A/P/DIVDIVclass=boxAclass=imgBorderhref="/"target=_blankIMGheight=84src="/upload/images/net/2010-01/wall_s2.jpg"width=124border=0/APAhref="/"target=_blank生态旅游区/A/P/DIVDIVclass=boxAclass=imgBorderhref="/"target=_blankIMGheight=84src="/upload/images/net/2010-01/wall_s3.jpg"width=124border=0/APAhref="/"target=_blank奥运馆场/A/P/DIVDIVclass=boxAclass=imgBorderhref="/"target=_blankIMGheight=84src="/upload/images/net/2010-01/wall_s4.jpg"width=124border=0/APAhref="/"target=_blank瑞典山脉/A/P/DIVDIVclass=boxAclass=imgBorderhref="/"target=_blankIMGheight=84src="/upload/images/net/2010-01/wall_s5.jpg"width=124border=0/APAhref="/"target=_blank体育旅游/A/P/DIVDIVclass=boxAclass=imgBorderhref="/"target=_blankIMGheight=84src="/upload/images/net/2010-01/wall_s5.jpg"width=124border=0/APAhref="/"target=_blank福建武山/A/P/DIVDIVclass=boxAclass=imgBorderhref="/"target=_blankIMGheight=84src="/upload/images/net/2010-01/wall_s6.jpg"width=124border=0/APAhref="/"target=_blank中国张家界/A/P/DIVDIVclass=boxAclass=imgBorderhref="/"target=_blankIMGheight=84src="/upload/images/net/2010-01/wall_s7.jpg"width=124border=0/APAhref="/"target=_blank奥运开幕式/A/P/DIV!--图片列表end--/DIVDIVclass=RightBottonid=RightArr/DIV/DIVp/pp/pp/pp/ppSCRIPTlanguage=javascripttype=text/javascript!--//--![CDATA[//!--
varscrollPic_02=newScrollPic();scrollPic_02.scrollContId="ISL_Cont_1";scrollPic_02.arrLeftId="LeftArr";//左箭头ID
scrollPic_02.arrRightId="RightArr";
//右箭头ID
scrollPic_02.frameWidth=908;//显示框宽度
scrollPic_02.pageWidth=152;//翻页宽度
scrollPic_02.speed=10;//移动速度(毫秒，越小越快)
scrollPic_02.space=10;//每次移动像素(单位px，越大越快)
scrollPic_02.autoPlay=false;//自动播放
scrollPic_02.autoPlayTime=3;//自动播放间隔时间(秒)
scrollPic_02.initialize();//初始化
//--!]]/SCRIPT/p/DIV!--滚动图片end--/div/body/html