面向对象 实现轮播组件

Posted evenyao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了面向对象 实现轮播组件相关的知识,希望对你有一定的参考价值。

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

逻辑图

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

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

  • 初始化之后,在第1张图之前添加一张图4,在第4张图之后添加一张图1(即最后一张图添加第一张图,第一张图添加最后一张图)
  • 当 nextBtn 被点击的时候,向右移
  • 但当 next 到最后一张图片时,下面已经没有图片了,所以此时作一个判断操作,当判断到达最后一张图片的时候,将整体全部左移,并将原始的第一张图片放到视窗的位置,如图所示
  • 当 preBtn 被点击的时候,向左移
  • 当 pre 到第一张图片时,与上同理,如图所示
 
技术分享图片

 

原理效果

技术分享图片

 

技术分享图片

然后将 css 中视窗容器的 overflow: hidden;重新添加即可

技术分享图片 
技术分享图片

 

其他

设置自动轮播,并添加鼠标 hover 事件
mouseover 时:停止自动轮播
mouseout 时:重新开始自动轮播

Github 源码

Demo

以上是关于面向对象 实现轮播组件的主要内容,如果未能解决你的问题,请参考以下文章

原生js面向对象实现简单轮播

面向对象实现无缝轮播

基于面向对象的图片轮播(js原生代码)

原生js简单轮播图 代码

面向对象实现多图轮播效果

jQuery图片轮播轮播实现并封装