Home > Developer > Web Develop
<title>Untitled Document</title><style>* {margin:0;padding:0;}#div1{width:1172px;Height:220px;margin:100px Auto;position:relative;background:Red;Overflow:Hidden;}#div1 ul Li{float: Left;width:293px;Height:220px;List-style:None; }</style><Script>window.onload=function (){ varOdiv=document.getElementById ('Div1'); varOul=Odiv.getelementsbytagname ('ul')[0]; varALi=Oul.getelementsbytagname ('Li'); vartimer; var Speed=-2; Oul.innerhtml=oul.innerhtml+oul.innerhtml; OUl.style.width=ali[0].offsetwidth*Ali.length+'px'; functionMove () {if(Oul.offsetleft<-Oul.offsetwidth/2){oUl.style.left=0; } if(Oul.offsetleft>0) {OUl.style.left=-Oul.offsetwidth/' px ';} oUl.style.left=Oul.offsetleft+ Speed+'px'; }; Odiv.onmouseover=function() {clearinterval (timer); } odiv.onmouseout=function() {Timer=setinterval (Move, -); } document.getelementsbytagname ('a')[0].onclick=function() { speed=-2; } document.getelementsbytagname ('a')[1].onclick=function() { speed=2; }};</Script></Head><Body><ahref= "javascript:;">Roll left</a><ahref= "javascript:;">Roll Right</a><DivID= "Div1"> <ulstyle= "position:absolute; left:0; top:0;"> <Li><imgsrc= "Images/05.jpg"/></Li> <Li><imgsrc= "Images/05.jpg"/></Li> <Li><imgsrc= "Images/05.jpg"/></Li> <Li><imgsrc= "Images/05.jpg"/></Li> </ul></Div></Body>
First encountered a problem, UL style is the external style, so code oul.style.left=oul.offsetleft-2+ ' px ' has a problem, the program can not run, style cannot take external style, remember!
Timer
Turn on timer
SetInterval Spacer Type
SetTimeout Delay Type
Stop Timer
Clearinterval
Cleartimeout
Use of JS Timer--Seamless scrolling
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
