JS实现简单图片轮播效果

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

实现效果

• 左右按钮可点击左右移动显示图片进行无缝滚动
• 下面的小圆圈点击可跳到对应的图片索引
• 不进行上述操作时，图片自动轮播
  

html源码

一个大的div盒子里面，两个左右悬浮于中间的按钮，四张图片，一行相对于下面的小圆圈

css源码

js源码

animate.js：在水平平面实现左右移动的函数

index.js

心得：在js实现功能中，如何根据图片数量生成小圆圈并能无缝滚动需要重点注意。
未解决的bug：多次快速点击小圆圈跳转后，可能会导致小圈圈与图片索引位置错乱，同样点击左右按钮也有可能出现类似问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。