Home > Developer > Web Develop
Yesterday a friend let me use JS to help him do a simple carousel diagram, I am a rookie, JS learning is not how, plus a long time did not knock code, almost confused, fortunately engaged nearly one hours finally fix. Have time to record today, to share to the needs of friends.
implementation of the idea: the carousel is actually a timer, so we just need to change the current position of the image at regular intervals. This is easy to implement, and the code below is straightforward.
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; CHARSET=GBK" />5 <title>Carousel Diagram</title>6 </Head>7 <Bodyonload= "Dingshi (+)">8 <Divstyle= "Position:relative;width:320px;height:479px"ID= "Container">9 <Divstyle= "position:absolute; top:0px; left:0px;d isplay:block;"><imgsrc= "1.jpg"width= " the"Height= "479" /></Div>Ten <Divstyle= "position:absolute; top:0px; left:0px;display:none;"> <imgsrc= "2.jpg"width= " the"Height= "479" /></Div> One <Divstyle= "position:absolute; top:0px; left:0px;display:none;"><imgsrc= "3.jpg"width= " the"Height= "479" /></Div> A <Divstyle= "position:absolute; top:0px; left:0px;d isplay:none;"><imgsrc= "4.jpg"width= " the"Height= "479" /></Div> - <Divstyle= "position:absolute; top:0px; left:0px;display:none;"> <imgsrc= "5.jpg"width= " the"Height= "479" /></Div> - <Divstyle= "position:absolute; top:0px; left:0px;display:none;"><imgsrc= "6.jpg"width= " the"Height= "479" /></Div> the </Div> - <DivID= "NAV"style= "position:absolute;top:460px;left:180px"> - <Divstyle= "cursor:pointer; margin-left:3px; Float:left;width:20px;height:20px;background-color:green;color:red;text-align:center; ">1</Div> - <Divstyle= "cursor:pointer; margin-left:3px; Float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center; ">2</Div> + <Divstyle= "cursor:pointer; margin-left:3px; Float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center; ">3</Div> - <Divstyle= "cursor:pointer; margin-left:3px; Float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center; ">4</Div> + <Divstyle= "cursor:pointer; margin-left:3px; Float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center; ">5</Div> A <Divstyle= "cursor:pointer; margin-left:3px; Float:left;width:20px;height:20px;background-color:blue;color:red;text-align:center; ">6</Div> at </Div> - <Scripttype= "Text/javascript"> - varI= 0; - varChildnode; - varIndexnode; - functionLunbo () { in varPics=document.getElementById ("Container"). Children;//Get all child nodes - varindexnums=document.getElementById ("nav"). Children; to varPicnum=pics.length; + if(i>=picnum) { - I= 0; the } * if(i<picnum) { $ Childnode=Pics[i];Panax Notoginseng Indexnode=indexnums[i++]; - for (varJ=0; J<Picnum; J++) { the if(J!=i) { + Pics[j].style.display= "None"; A Indexnums[j].style.backgroundcolor="Blue"; the } + } - ChildNode.style.display="Block"; $ IndexNode.style.backgroundColor="Green"; $ } - } - the functionDingshi (time) { - Window.setinterval (Lunbo, time);Wuyi } the </Script> - </Body> Wu </HTML>Carousel Diagram
The effect is as follows:
Using JS to implement the Carousel diagram
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
