js制作轮播图效果 js制作轮播图效果

轮播图在前端开发中我认为是一个比较重要的点，因为包含了很多原生js知识点，以下是我学习制作轮播图的过程
难点：
1、如何让底下圆圈和图片所对应自动动态生成
2、如何让底下圆圈和图片所对应的起来
3、上一页和下一页所在盒子所移动的距离
4、图片切换时的渐出动画效果
5、节流阀的概念

效果：

文章图片

代码：

Document - 锐客网* {padding: 0; margin: 0; } a {text-decoration: none; color: white; line-height: 50px; text-align: center; } li {list-style: none; } .tb-promo {position: relative; width: 700px; height: 300px; margin: auto; overflow: hidden; } .tb-promo .imgg {position: absolute; top: 0; left: 0; width: 3000px; } .tb-promo .imgg li {float: left; } .tb-promo .imgg li img {width: 700px; height: 300px; } .tb-promo .prev {display: none; position: absolute; top: 125px; left: 0; width: 25px; height: 50px; background-color: rgba(0, 0, 0, 0.2); border-top-right-radius: 25px; border-bottom-right-radius: 25px; z-index: 999; } .tb-promo .prev:hover {background-color: rgba(0, 0, 0, 0.5); } .tb-promo .next {display: none; position: absolute; top: 125px; right: 0; width: 25px; height: 50px; background-color: rgba(0, 0, 0, 0.2); border-top-left-radius: 25px; border-bottom-left-radius: 25px; z-index: 999; } .tb-promo .next:hover {background-color: rgba(0, 0, 0, 0.5); } .tb-promo .promo-nav {position: absolute; top: 270px; left: 50%; margin-left: -40px; height: 25px; } .tb-promo .promo-nav li {float: left; width: 16px; height: 16px; background-color: white; border-radius: 8px; margin: 4px; } .tb-promo .promo-nav .one { background-color: tomato; } <>

文章图片

文章图片

文章图片