面向对象 实现轮播组件

以面向对象的方式实现无线轮播效果组件
预览地址:https://evenyao.github.io/carousel-jQuery/

逻辑图

我们的demo轮播为四张图,如有多张图,逻辑是一样的

当初始化之前,CSS中如果撤除 overflow: hidden; ,即可看到该样式,即四张图排列在一起(此时容器的宽度已经通过JS计算得到)

初始化之后,在第1张图之前添加一张图4,在第4张图之后添加一张图1(即最后一张图添加第一张图,第一张图添加最后一张图)

当 nextBtn 被点击的时候,向右移

但当 next 到最后一张图片时,下面已经没有图片了,所以此时作一个判断操作,当判断到达最后一张图片的时候,将整体全部左移,并将原始的第一张图片放到视窗的位置,如图所示

当 preBtn 被点击的时候,向左移

当 pre 到第一张图片时,与上同理,如图所示

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspzdg.html