1 <!DOCTYPE HTML>2 <HTMLLang= "cn">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 <styletype= "Text/css">7 #box{8 width:800px;9 Height:200px;Ten Border:1px solid #000; One margin:0 Auto; A Overflow:Hidden; - } - #content{ the width:10000px; - } - #imglist{float: Left;} - #imglist img{ + width:300px; - Height:200px; + float: Left; A } at </style> - </Head> - <Body> - <H1>Picture Seamless Wheel Roll</H1> - <HR> - in <DivID= "box"> - <DivID= "Content"> to <DivID= "Imglist"> + <imgsrc= "./imgs/meinv001.jpg"> - <imgsrc= "./imgs/meinv002.jpg"> the <imgsrc= "./imgs/meinv003.jpg"> * <imgsrc= "./imgs/meinv004.jpg"> $ <imgsrc= "./imgs/meinv005.jpg">Panax Notoginseng <imgsrc= "./imgs/meinv006.jpg"> - <imgsrc= "./imgs/meinv007.jpg"> the <imgsrc= "./imgs/meinv008.jpg"> + <imgsrc= "./imgs/meinv009.jpg"> A <imgsrc= "./imgs/meinv010.jpg"> the <imgsrc= "./imgs/meinv011.jpg"> + <imgsrc= "./imgs/meinv012.jpg"> - <imgsrc= "./imgs/meinv013.jpg"> $ <imgsrc= "./imgs/meinv014.jpg"> $ <imgsrc= "./imgs/meinv015.jpg"> - </Div> - </Div> the </Div> - Wuyi <Script> the - //get the width of a round picture Wu varwidth=Imglist.offsetwidth; - //appends a copy of a picture to the current picture. About Content.appendchild (Imglist.clonenode (true)); $ - functionScrollimage () { - //determine whether a round of pictures is rolled out - if(Box.scrollleft>=width) { A Box.scrollleft= 0; + } the //5 pixels per scroll - Box.scrollleft+= 5; $ Console.log (box.scrollleft); the } the the //0.1 seconds the setinterval (Scrollimage, -); - in </Script> the </Body> the </HTML>
This is a use JS to do a picture seamless wheel roll, the inside of the notes have their own ideas, there are deficiencies in the hope forgive me.
JS--Picture Seamless wheel roll