纯HTML和CSS实现JD轮播图效果

源码坊 · 发表于 2021-5-5 01:52:32

使用了纯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>  <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.mubanren.com/thread-310-1-1.html

最新牛联盟H5牛牛/免公众号/免签支付/完美

纯HTML和CSS实现JD轮播图效果

本帖子中包含更多资源

相关帖子

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老

高级资源

游戏源码

游戏素材

VIP专区