博主使用了纯HTML和CSS实现了JD的轮播图，没有加动态效果，主要是使用了定位的知识。
，如图为两个侧边箭头图片。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="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> ???<div class="lunbo"> ???????<img src="images/lunbo.jpg" alt=""> ???????<div class="left"><img src="images/left.png" alt=""></div> ???????<!-- 也可以使用链接然后使用backgrounf --> ???????<div class="right"><img src="images/right.png" alt=""></div> ???????<ul> ???????????<li class="current"></li> ???????????<li></li> ???????????<li></li> ???????????<li></li> ???????????<li></li> ???????????<li></li> ???????????<li></li> ???????????<li></li> ???????</ul> ???</div></body></html>实现了如下效果
纯HTML和CSS实现JD轮播图
原文地址：https://www.cnblogs.com/mugglean/p/9118933.html