Bloggers use pure HTML and CSS to implement the JD's carousel, without adding dynamic effects, mainly using the knowledge of positioning.
, for two side arrows picture.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Lunbo</title> <style> *{padding:0;margin:0; }Li{List-style:None; }. Lunbo{margin:40px Auto;Height:470px;width:590px;position:relative; }. Left,.right{position:Absolute;Top:50%;Margin-top:-18px;width:24px;Height:36px; }. Left{ Left:0; }. Right{ Right:0; }. Lunbo ul{Height:18px;width:151px;background:Rgba (255,255,255,.3);position:Absolute;Bottom:10px; Left:50%;Margin-left:-76px;Border-radius:10px; }. Lunbo Li{Height:14px;width:14px;Border-radius:50%;Background-color:#fff;float: Left;margin:2px; }. Lunbo. current{Background-color:#f40; } </style></Head><Body> <Divclass= "Lunbo"> <imgsrc= "Images/lunbo.jpg"alt=""> <Divclass= "Left"><imgsrc= "Images/left.png"alt=""></Div> <!--You can also use the link and then use the BACKGROUNF - <Divclass= "Right"><imgsrc= "Images/right.png"alt=""></Div> <ul> <Liclass= "Current"></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> <Li></Li> </ul> </Div></Body></HTML>
Achieves the following effect
Pure HTML and CSS implementation of the JD Carousel map