进阶17-轮播实现

1.轮播原理：

将图片排成一行，隐藏超出范围的图片，在第一张图片前添加1最后一张图片，在最后一张图片后添加第一张图片，当触发点击下一张图片的事件时，根据方向移动图片位置来滚动显示图片，滚动到最后一张图片或第一张图片时，再次滚动要跳转到第一张的图片或最后一张图片的位置，主要是利用js修改图片的位置。也可以将图片用淡入淡出的方法来实现此效果。
接口：

playPre() //上一页
playNext() //下一页
setBullet() //鼠标点击切换

2.轮播实例

轮播

3.渐变轮播实例

渐变轮播

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

推荐阅读更多精彩内容

  • 进阶17 轮播的实现
    1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 一种左...
    晓风残月1994阅读 457评论 0赞 0
  • 进阶17-轮播
    1.轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()） 示意图 ...
    24_Magic阅读 299评论 0赞 0
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,273评论 4赞 61
  • 进阶17-轮播的实现
    题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）Pa...
    饥人谷_桶饭阅读 263评论 0赞 0
  • 出埃及记：第二十三章
    27 不可散布谣言 28 遇见仇敌的牛驴要牵回去给他 29 不可屈枉穷人 30 务要远离假话 31 不可受贿 32...
    瓦登之湖阅读 3,622评论 0赞 0