原生js轮播图

今天和大家分享的案例是轮播图

简书

由js实现的轮播图效果

代码展示：

css部分：

HTML部分：

script 部分：

代码解析：

css部分：让div的宽度等于三张图片的宽度，同时显示三张图片并进行定位，里面的图片列表进行定位。让多余的部分隐藏。

简书

script：让列表的宽度增加一倍，用来轮播，防止出现空白。这样图片就能一条龙不停的轮播下去了，变量 i 来控制图片的距离，通过调节 i 自减的速度来控制轮播的速度。

简书

关键在于offsetLeft与ul.style.width两种格式的应用。

更多前端内容，请点击关注