轮播的实现

轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）

将图片排成一行，隐藏超出范围的图片，并在第一张图片前添加最后一张图片，在最后一张图片后添加第一张图片，当触发点击下一张图片的事件时，根据方向移动图片位置来滚动显示图片，滚动到最后一张图片或第一张图片时，再次滚动要跳转到第一张的图片或最后一张图片的位置；

通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值，来达到一个轮播的效果。

实现视频中的左右滚动无限循环轮播效果

https://github.com/nciilin/trsk/blob/master/%E8%BF%9B%E9%98%B617/carousel-slide.html

实现一个渐变轮播效果

https://github.com/nciilin/trsk/blob/master/%E8%BF%9B%E9%98%B617/carousel-fade.html

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

推荐阅读更多精彩内容

  • 转载：程序猿（-，11-24）
    @synthesize和@dynamic分别有什么作用？@property有两个对应的词，一个是 @synthes...
    笔笔请求阅读 532评论 0赞 1
  • 轮播的实现
    轮播的实现原理？ 以四个图片的轮播为例html部分：图片存放在ul li标签内，并使用一个div包裹ulcss部分...
    放风筝的小小马阅读 636评论 0赞 0
  • 滚动视图无限轮播的实现
    大家在项目中很可能会遇见广告图片的无限轮播效果的实现。这里我就来简单谈一下自己的实现思路，如果有其他实现方法的还请...
    Asing_liu阅读 857评论 0赞 2
  • 轮播的实现
    题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 左...
    cctosuper阅读 263评论 0赞 0
  • 说些废话
    虽然不知道是谁把聒噪这个词儿安在女人身上，不过偶尔我也不得不承认这话有理。 脑子里和喉咙里每秒都有无数的东西往外冒...
    坂田酒阅读 207评论 0赞 1