jquery轮播

1. 轮播的实现原理是怎样的?

Paste_Image.png

如上图所示,黑色的为显示区域,后面的红色矩形只有在黑色框内才能显示,其他时刻均不可见。那么只用控制红色矩形的左右位置,就可以实现黑色框内的内容切换显示了。

2.可以抽象出哪些接口?

可以把核心功能切换图片抽象出来,比如定义一个slider(index),用来控制图片内容的左右滚动。将所有图片放在一个容器里,一行排列,当slider(0)的时候,容器的位置不发生改变,当slider(1)的时候,容器位置向左便宜一个图片宽度。

3.渐变切换的思路

slider(index)要改造成上一张渐隐,下一张渐现。
css需要把每一个图片的position 设置为非static的属性,这样可以让图片堆叠在一起。然后将图片的display为none

渐变切换

不需要对需要渐变切换的图片进行一行排列,因为当display为none之后,并不会占据文档流,所以排列没有意义。如果排列了反而会有一个副作用就是渐变切换会不流畅。会出现这样的效果点我查看。如果一定要一行排列了,而且就是不想改css,那么可以把 fadeIn的执行放在fadeOut的回调里点我查看代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 实现原理 CSS部分 图片容器宽度设置为图片宽度*图片数量,并将所有图片使用浮动进行水平排列,形成一个滑动轨道; ...
    Sketch阅读 203评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())实现...
    YangJeremy阅读 546评论 0 50
  • HTML CSS JS 无缝 原理:clone首图放入父容器末;clone尾图放入父容器头。丨 show 丨clo...
    jrg_memo阅读 292评论 0 0
  • 最近在学习Vue,然后做了一个轮播图,然后想起之前用jQuery做的轮播图,就打算进行一个对比。 jQuery轮播...
    大春春阅读 17,878评论 13 61
  • https://github.com/coderMyy/MYCoreTextLabel 图文混排 , 实现图片文...
    saman0阅读 2,971评论 1 19