Html:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><Linkrel= "stylesheet"type= "Text/css"href=".. /css/test2.css "><Scripttype= "Text/javascript"src=".. /js/test2.js "></Script><title>Picture Carousel</title></Head><Bodyonload= "onpageloaded ()"> <Divclass= "S1"> <Divclass= "S2"><imgsrc=".. /img/left.png "onclick= "Goleftclick ()"></img></Div> <Divclass= "S3"><imgsrc=".. /img/right.png "onclick= "Gorightclick ()"></img></Div> <ulID= "Imglist" > <Li> <imgsrc=".. /img/img1.jpg "></img></Li> <Li> <imgsrc=".. /img/img2.jpg "></img></Li> <Li> <imgsrc=".. /img/img3.jpg "></img></Li> <Li> <imgsrc=".. /img/img4.jpg "></img></Li> </ul> </Div></Body></HTML>
Css:
@CHARSET "UTF-8"; body{width:950px;Height:800px;Background-color:Silver;margin:0 Auto;Border:1px solid Red;}. S1{width:950px;Height:250px;Margin-top:100px;Background-color:Orange;position:relative;/*first, the outer div is positioned*/ Left:0;Top:0;Overflow:Hidden;/*Auto-Hide out of content*/}. S2{/*Background-color:blue;*/position:Absolute;/*and then position the left and right navigation div inside.*/ Left:30px;Top:93px;Z-index:1;}. S3{/*Background-color:blue;*/position:Absolute; Left:856px;Top:93px;Z-index:1;}/*Image ul*/. S1 ul{width:3800px;/*ul width sets the sum of the widths of all images*/Height:250px;padding:0;/*padding Setting 0*/margin:0;/*margin Settings 0*/Background-color:Purple;Overflow:Hidden;/*Auto-Hide out of content*/}. S1 ul > Li{width:950px;List-style-type:None;float: Left;}. S1 ul img{width:950px;Height:250px;/*max-width:100%;*/}
Javascript:
/** * @description: * @author chenchen Yu * @date November 23, 2016 * @time pm 9:01:21*/ varK=0; varimgnum=4;//Number of pictures varimgwidth=950; functiononpageloaded () {setTimeout (' Goleft () ', 2000); } //automatically swipe left picturefunctionGoleft () {varImglist=document.getelementbyid (' Imglist '); MarginLeft=-((k+1)%imgnum) *ImgWidth; if(marginleft==0) {ImgList.style.marginLeft= ' 0px '; K++; SetTimeout (' Goleft () ', 2000); return; } slideleft (Imglist,marginleft+imgwidth,marginleft); //k++;}functionSlideleft (imglist,start,marginleft) {//Analog Slide //var start=marginleft+950;SetTimeout (' slideleftbystep (' + ' imglist ' + ', ' +start+ ', ' +marginleft+ ') ', 10);}functionSlideleftbystep (imglist,dis,marginleft) {if(dis<marginleft) {k++; SetTimeout (' Goleft () ', 2000); return; } imgList.style.marginLeft=dis+ ' px '; Dis=dis-50;//Step SizeSlideleft (imglist,dis,marginleft);}functionGoleftclick () {}//Click the right to swipe the picturefunctionGorightclick () {varImglist=document.getelementbyid (' Imglist '); if(k<=0| | (k)%imgnum==0) { //imglist.style.marginleft= ' 0px ';K=0; return; } k=k-2;//backmarginleft=-((k+1)%imgnum) *ImgWidth; Clickslideright (Imglist,marginleft-imgwidth,marginleft); Console.log (' KK ', marginleft);//imglist.style.marginleft= ' 0px ';}functionClickslideright (imglist,start,marginleft) {setTimeout (' Clicksliderightbystep (' + ' imglist ' + ', ' +start+ ', ' +marginleft+ ') ', 5);}functionClicksliderightbystep (imglist,dis,marginleft) {if(dis>marginleft) {k++;// return; } imgList.style.marginLeft=dis+ ' px '; Dis=dis+50;//Step Sizeclickslideright (imglist,dis,marginleft);}//Click Left to slide the picturefunctionGoleftclick () {varImglist=document.getelementbyid (' Imglist '); if((k+1)%imgnum==0) {k=0; return; } marginleft=-((k+1)%imgnum) *ImgWidth; Clickslideleft (Imglist,marginleft+imgwidth,marginleft);}functionClickslideleft (imglist,start,marginleft) {setTimeout (' Clickslideleftbystep (' + ' imglist ' + ', ' +start+ ', ' +marginleft+ ') ', 5);}functionClickslideleftbystep (imglist,dis,marginleft) {if(dis<marginleft) {k++;//Keep Automatic sliding sync return; } imgList.style.marginLeft=dis+ ' px '; Dis=dis-50;//Step SizeClickslideleft (imglist,dis,marginleft);}
：
Html+css+javascript implementation of simple carousel pictures
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
