来源：蜘蛛抓取(WebSpider)
时间：2018-01-24 23:13
标签：
小米mix怎么升级miui9
2441人阅读
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&JS控制点击按钮图片向左或向右移动效果 演示&/title&
TABLE { BORDER-TOP-WIDTH: 0 PADDING-RIGHT: 0 PADDING-LEFT: 0 BORDER-LEFT-WIDTH: 0 BORDER-BOTTOM-WIDTH: 0 PADDING-BOTTOM: 0 MARGIN: 0 PADDING-TOP: 0 BORDER-RIGHT-WIDTH: 0px}
BODY { PADDING-RIGHT: 0 PADDING-LEFT: 0 FONT-SIZE: 12 BACKGROUND: # PADDING-BOTTOM: 5 COLOR: #333; PADDING-TOP: 5 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}
.F14lists UL { PADDING-RIGHT: 3 PADDING-LEFT: 3 PADDING-BOTTOM: 0 PADDING-TOP: 0px}
.F14lists LI { PADDING-LEFT: 2 FONT-SIZE: 14 VERTICAL-ALIGN: bottom}
.F14lists LI SPAN { FONT-SIZE: 9 COLOR: #533826}
.FixTitle A:link { COLOR: #0736 TEXT-DECORATION: none}
.FixTitle A:visited { COLOR: #0736 TEXT-DECORATION: none}
.FixTitle A:hover { TEXT-DECORATION: underline}
.FixTitle { BORDER-RIGHT: #a2d1ff 1 BORDER-TOP: #a2d1ff 1 BACKGROUND: url(/jzxy/UploadFiles_333/98.gif) 0px -101 OVERFLOW: BORDER-LEFT: #a2d1ff 1 LINE-HEIGHT: 24 BORDER-BOTTOM: #a2d1ff 1
HEIGHT: 24px}
.FixTitle H3 { PADDING-LEFT: 30 FONT-SIZE: 14 BACKGROUND: url(/jzxy/UploadFiles_333/33.gif) 2px -197 FLOAT: COLOR: #0736aa}
.FixTitle SPAN { PADDING-RIGHT: 5 FLOAT: right}
.RForm { PADDING-RIGHT: 10 PADDING-LEFT: 10 PADDING-BOTTOM: 10 PADDING-TOP: 10px}
.RForm DT { LINE-HEIGHT: 23px}
.RformB { PADDING-LEFT: 10px}
.blk_29 { BORDER-RIGHT: #a1d2fd 1 PADDING-RIGHT: 0 BORDER-TOP: #a1d2fd 0 PADDING-LEFT: 0 PADDING-BOTTOM: 10 OVERFLOW: BORDER-LEFT: #a1d2fd 1 PADDING-TOP: 10 BORDER-BOTTOM: #a1d2fd 1 ZOOM: 1; POSITION:
.blk_29 .LeftBotton { BACKGROUND: url(/jzxy/UploadFiles_333/98.gif) no-repeat 0px 0 LEFT: 5 FLOAT: WIDTH: 11 CURSOR: POSITION: TOP: 10 HEIGHT: 114px}
.blk_29 .RightBotton { RIGHT: 5 BACKGROUND: url(/jzxy/UploadFiles_333/98.gif) no-repeat -11px 0 FLOAT: WIDTH: 11 CURSOR: POSITION: TOP: 10 HEIGHT: 114px}
.blk_29 .Cont { MARGIN: 0 OVERFLOW: WIDTH: 888 PADDING-TOP: 5px}
.blk_29 .box { FLOAT: WIDTH: 152 TEXT-ALIGN: center}
.blk_29 .box IMG { BORDER-RIGHT: #add2fc 1 PADDING-RIGHT: 3 BORDER-TOP: #add2fc 1 DISPLAY: PADDING-LEFT: 3 BACKGROUND: # PADDING-BOTTOM: 3 MARGIN: 0 BORDER-LEFT: #add2fc 1 PADDING-TOP: 3 BORDER-BOTTOM:
#add2fc 1px solid}
.blk_29 .box A:hover IMG { BORDER-RIGHT: #5385cc 1 BORDER-TOP: #5385cc 1 BORDER-LEFT: #5385cc 1 BORDER-BOTTOM: #5385cc 1px solid}
.blk_29 .box P { MARGIN: 6px auto 0 WIDTH: 97 LINE-HEIGHT: 20px}
.rollphotos { MARGIN-TOP: 10WIDTH: 950px}
.partC { MARGIN-TOP: 10 OVERFLOW: WIDTH: 950px}
.partC .PC_left { OVERFLOW: WIDTH: 470px}
.partC .PC_right { OVERFLOW: WIDTH: 470px}
.partC .PC_left { FLOAT: left}
.partC .PC_right { FLOAT: right}
.PT_mix { BORDER-RIGHT: #a2d1ff 1 PADDING-RIGHT: 0 BORDER-TOP: #a2d1ff 0 PADDING-LEFT: 0 BACKGROUND: #f3 PADDING-BOTTOM: 10 OVERFLOW: BORDER-LEFT: #a2d1ff 1 PADDING-TOP: 0 BORDER-BOTTOM: #a2d1ff 1px solid}
.PhoTxt { MARGIN-TOP: 10 DISPLAY: FLOAT: MARGIN-LEFT: 10 OVERFLOW: WIDTH: 220px}
.PhoTxt IMG { BORDER-RIGHT: #ccc 1 PADDING-RIGHT: 3 BORDER-TOP: #ccc 1 PADDING-LEFT: 3 BACKGROUND: # FLOAT: PADDING-BOTTOM: 3 BORDER-LEFT: #ccc 1 MARGIN-RIGHT: 5 PADDING-TOP: 3 BORDER-BOTTOM: #ccc 1px solid}
.PhoTxt H1 { FONT-WEIGHT: FONT-SIZE: 12 LINE-HEIGHT: 23px}
.PhoTxt P { COLOR: #545454; LINE-HEIGHT: 20px}
&SCRIPT type=text/javascript&
var scrollname={$:function(objName){if(document.getElementById){return eval('document.getElementById(&'+objName+'&)')}else{return eval('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){var
o=&&,l=O+&=&;if(document.cookie.length&0){var i=document.cookie.indexOf(l);if(i!=-1){i+=l.var I=document.cookie.indexOf(&;&,i);if(I==-1)I=document.cookie.o=unescape(document.cookie.substring(i,I))}};return o},writeCookie:function(i,l,o,c){var
O=&&,I=&&;if(o!=null){O=new Date((new Date).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]){return I.style[l]}else if(I.currentStyle){return I.currentStyle[l]}else
if(document.defaultView&&document.defaultView.getComputedStyle){var i=document.defaultView.getComputedStyle(I,null);return i.getPropertyValue(l)}else{return null}}};
function ScrollPic(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=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.ScrollPic.childs.push(this);this.initialize=function(){if(!this.scrollContId){throw
new Error(&必须指定scrollContId.&);return};this.scrollContDiv=scrollname.$(this.scrollContId);if(!this.scrollContDiv){throw new Error(&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=&10000px&;if(!+[1,]){this.listDiv01.style.styleFloat=&left&;this.listDiv02.style.styleFloat=&left&;}else{this.listDiv01.style.cssFloat=&left&;this.listDiv02.style.cssFloat=&left&;}
;scrollname.addEvent(this.scrollContDiv,&mouseover&,Function(&ScrollPic.childs[&+this.ID+&].stop()&));scrollname.addEvent(this.scrollContDiv,&mouseout&,Function(&ScrollPic.childs[&+this.ID+&].play()&));if(this.arrLeftId){this.arrLeftObj=scrollname.$(this.arrLeftId);if(this.arrLeftObj){scrollname.addEvent(this.arrLeftObj,&mousedown&,Function(&ScrollPic.childs[&+this.ID+&].rightMouseDown()&));scrollname.addEvent(this.arrLeftObj,&mouseup&,Function(&ScrollPic.childs[&+this.ID+&].rightEnd()&));scrollname.addEvent(this.arrLeftObj,&mouseout&,Function(&ScrollPic.childs[&+this.ID+&].rightEnd()&))}};if(this.arrRightId){this.arrRightObj=scrollname.$(this.arrRightId);if(this.arrRightObj){scrollname.addEvent(this.arrRightObj,&mousedown&,Function(&ScrollPic.childs[&+this.ID+&].leftMouseDown()&));scrollname.addEvent(this.arrRightObj,&mouseup&,Function(&ScrollPic.childs[&+this.ID+&].leftEnd()&));scrollname.addEvent(this.arrRightObj,&mouseout&,Function(&ScrollPic.childs[&+this.ID+&].leftEnd()&))}};if(this.dotListId){this.dotListObj=scrollname.$(this.dotListId);if(this.dotListObj){var
pages=Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4),i,tempOfor(i=0;i&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)+&页&;scrollname.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);var
fill=this.pageWidth-this.scrollContDiv.scrollLeft%this.pageWthis.move(fill)};this.rightEnd=function(){if(_state!=&floating&){return};_state=&stoping&;clearInterval(_scrollTimeObj);var fill=-this.scrollContDiv.scrollLeft%this.pageWthis.move(fill)};this.move=function(num,quick){var
thisMove=num/5;if(!quick){if(thisMove&this.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)};var temp=this.scrollContDiv.scrollLeft+thisMif(thisMove&0){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-=thisMif(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&;var
fill=num*this.frameWidth-this.scrollContDiv.scrollLthis.move(fill,true)};this.accountPageIndex=function(){this.pageIndex=Math.round(this.scrollContDiv.scrollLeft/this.frameWidth);if(this.pageIndex&Math.round(this.listDiv01.offsetWidth/this.frameWidth+0.4)-1){this.pageIndex=0};var
for(i=0;i&this.dotObjArr.i++){if(i==this.pageIndex){this.dotObjArr[i].className=this.dotClassName}else{this.dotObjArr[i].className=this.dotOnClassName}}}};
&div align=¢er&&
&!--滚动图片 start--&
&DIV class=rollphotos&
&DIV class=FixTitle&
&H3&开幕式回顾&/H3&&SPAN&&A href=&/& target=_blank&更多&&&/A&&/SPAN&&/DIV&
&DIV class=blk_29&
&DIV class=LeftBotton id=LeftArr&&/DIV&
&DIV class=Cont id=ISL_Cont_1&&!-- 图片列表 begin --&
&DIV class=box&&A class=imgBorder href=&/& target=_blank&&IMG height=84 alt=&破洛洛& src=&/jzxy/UploadFiles_333/39.jpg& width=124&
border=0&&/A&&
&P&&A href=&/&&
target=_blank&开幕式火炬传递&/A&&/P&&/DIV&
&DIV class=box&&A class=imgBorder href=&/& target=_blank&&IMG height=84 alt=&破洛洛& src=&/jzxy/UploadFiles_333/17.jpg& width=124&
border=0&&/A&&
&P&&A href=&/&&
target=_blank&开幕式精彩瞬间&/A&&/P&&/DIV&
&DIV class=box&&A class=imgBorder href=&/& target=_blank&&IMG height=84 alt=&破洛洛& src=&/jzxy/UploadFiles_333/07.jpg& width=124&
border=0&&/A&&
&P&&A href=&/&&
target=_blank&卡通玩偶组成会徽&/A&&/P&&/DIV&
&DIV class=box&&A class=imgBorder href=&/& target=_blank&&IMG height=84 alt=&破洛洛& src=&/jzxy/UploadFiles_333/38.jpg& width=124&
border=0&&/A&&
&P&&A href=&/&&
target=_blank&开幕式焰火表演&/A&&/P&&/DIV&
&DIV class=box&&A class=imgBorder href=&/& target=_blank&&IMG height=84 alt=&破洛洛& src=&/jzxy/UploadFiles_333/47.jpg& width=124&
border=0&&/A&&
&P&&A href=&/&&
target=_blank&中国代表团入场&/A&&/P&&/DIV&
&DIV class=box&&A class=imgBorder href=&/& target=_blank&&IMG height=84 alt=&破洛洛& src=&/jzxy/UploadFiles_333/89.jpg& width=124&
border=0&&/A&&
&P&&A href=&/&&
target=_blank&各代表团入场&/A&&/P&&/DIV&
&DIV class=box&&A class=imgBorder href=&/& target=_blank&&IMG height=84 alt=&破洛洛& src=&/jzxy/UploadFiles_333/49.jpg& width=124&
border=0&&/A&&
&P&&A href=&/&&
target=_blank&开幕式暖场表演&/A&&/P&&/DIV&
&DIV class=box&&A class=imgBorder href=&/& target=_blank&&IMG height=84 alt=&破洛洛& src=&/jzxy/UploadFiles_333/04.jpg& width=124&
border=0&&/A&&
&P&&A href=&/&&
target=_blank&开幕式即将举行&/A&&/P&&/DIV&&!-- 图片列表 end --&&/DIV&
&DIV class=RightBotton id=RightArr&&/DIV&&/DIV&
&SCRIPT language=javascript type=text/javascript&
& &!--//--&&![CDATA[//&&!--
& var scrollPic_02 = new ScrollPic();
& scrollPic_02.scrollContId & = &ISL_Cont_1&; //内容容器ID
& 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 & & & = //自动播放
& scrollPic_02.autoPlayTime & = 3; //自动播放间隔时间(秒)
& scrollPic_02.initialize(); //初始化
& //--&&!]]&
&!--滚动图片 end--&
&p&查找更多效果代码，请访问：&a href=&& target=&_blank&&破洛洛&/a&&/p&
scrollPic_02.autoPlay&&&&&& = //自动播放
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：58988次
排名：千里之外
原创：20篇
转载：80篇
(2)(4)(1)(1)(1)(3)(1)(1)(1)(2)(4)(1)(2)(1)(7)(4)(1)(6)(5)(2)(5)(3)(3)(6)(14)(19)
