原生JavaScript实现轮播图原生JavaScript实现轮播图

本文实例为大家分享了JavaScript实现轮播图的具体代码，供大家参考，具体内容如下
效果：

代码：

- 锐客网 * { 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; }

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

< >