原生JavaScript实现轮播图
(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )
本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下
效果:
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul, li { list-style: none; } .banner { width: 1200px; height: 535px; border: 1px solid red; margin: 0 auto; position: relative; } .slider li { position: absolute; left: 0; top: 0; } a { width: 40px; height: 50px; background-color: rgba(0, 0, 0, 0.1); font-size: 50px; text-align: center; line-height: 50px; position: absolute; text-decoration: none; color: gray; } .btnl { left: 0; top: 50%; margin-top: -15px; } .btnr { right: 0; top: 50%; margin-top: -25px; } .tabs { position: absolute; bottom: 20px; left: 50%; margin-left: -75px; } .tabs li { width: 15px; height: 15px; background-color: #ccc; border-radius: 50%; float: left; margin-right: 10px; } </style> </head> <body> <div class="banner"> <ul class="slider"> <li><img src="/UploadFiles/2021-04-02/b1.jpg">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:原生JavaScript实现留言板