JavaScript实现简易轮播图最全代码解析（ES5） JavaScript实现简易轮播图最全代

本文实例为大家分享了JavaScript实现简易轮播图效果的具体代码，供大家参考，具体内容如下
【JavaScript实现简易轮播图最全代码解析（ES5）】
全部代码：

ES5轮播图 - 锐客网* {padding: 0; margin: 0; }#wrapper {position: relative; margin: 50px auto; padding: 0; width: 1000px; height: 300px; }#wrapper .content {position: relative; width: 100%; height: 100%; overflow: hidden; }#wrapper>.content>.imgs {position: absolute; margin: 0; padding: 0; left: 0; top: 0; width: 6000px; /*多留出一张图片的宽度！*/list-style: none; }#wrapper>.content>.imgs li {float: left; margin: 0; padding: 0; width: 1000px; height: 300px; }#wrapper>.content>.imgs>li img {width: 100%; height: 100%; }#wrapper>.content>.dots {width: 163px; position: absolute; right: 0; left: 0; margin: auto; bottom: 10px; list-style: none; }#wrapper>.content>.dots li {float: left; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 50%; margin-left: 10px; cursor: pointer; }li.active {background-color: white; }li.quiet {background-color: #5a5a58; }.btns {display: none; }.btns span {position: absolute; width: 25px; height: 40px; top: 50%; margin-top: -20px; line-height: 40px; text-align: center; font-weight: bold; font-family: Simsun; font-size: 30px; border: 1px solid #fff; opacity: 0.5; cursor: pointer; color: #fff; background: black; }.btns .left {left: 5px; }.btns .right {left: 100%; margin-left: -32px; }

文章图片

文章图片

文章图片

文章图片

文章图片

< >