轮播

  1. 轮播实现的原理

  • 布局： 让父元素相对定位，设定宽高为一个图片的宽度，元素浮动横向排列，并且overflow:hidden；在父容器中设置一个图片容器，高度为图片的高度，宽度为图片的宽度*图片的个数；在底部设置小圆点，绝对定位于父容器的底部。
  • 逻辑： 将尾图片和首图片clone后，分别放在首尾；增加图片容器的宽度；封装向前、向后翻页的方法（动画、动画锁、变化小圆点的状态）；最后为按钮添加事件。
    函数：play(n):封装向后n页（n可以是负数），playNext:向后，playpre：向前。
  1. 轮播
    3.轮播渐变
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 轮播的实现(17)
    题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 横...
    饥人谷_js_chen阅读 413评论 0赞 0
  • Android-自定义View实现轮播图
    主要思路 1.我们需要自定义一个继承自FrameLayout的布局，利用FrameLayout布-局的特性（在同一...
    ZebraWei阅读 2,341评论 0赞 5
  • 轮播图
    1.轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 横向轮播...
    Rising_suns阅读 414评论 0赞 0
  • 原生js实现轮播图的组件化
    本文首发于我的博客，这是我的github，欢迎star。 这是一个轮播图组件，你可以直接下载使用，这里是代码地址，...
    空_城__阅读 1,583评论 2赞 5
  • 万物生长
    我常想 四季的变化 为何不是从炎夏径直走向寒冬？ 而以华美的春秋为界？ 冰雪的消融 为何不是从泉水径直流入大海？ ...
    所溺阅读 340评论 0赞 0