码迷,mamicode.com
首页 > 其他好文 > 详细

面向对象 实现轮播组件

时间:2018-09-02 16:11:15      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:over   通过   初始化   target   alt   contain   容器   query   form   

以面向对象的方式实现无线轮播效果组件
预览地址: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

面向对象 实现轮播组件

标签:over   通过   初始化   target   alt   contain   容器   query   form   

原文地址:https://www.cnblogs.com/evenyao/p/9573941.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!