轮播的实现

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

实现原理:
1.把图片a(即图片1的克隆)与图片b(即图片4的克隆)分别接到第一张图片(图片1)的上一张图片的位置,最后一张图片(图片4)的下一张图片的位置,作为过渡图片,如下图所示:


image.png

2.点击左箭头,图片1向图片b切换时,显示切换动画,当切换到图片b后(即图片b位于轮播窗口中时),立即调整图片盒子的left位置,使图片4显示在轮播窗口中,这样就能达到轮播无缝切换图片的效果。

image.png

抽象函数

//切换到哪个图片的方法
goTo(index)

//下方切换图片按钮样式的设置方法
setBulletDisplay(index)

//自动播放图片的方法
autoPlay()

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

http://js.jirengu.com/hayo/3/edit

image.png

3.实现一个渐变轮播效果, 效果范例

http://js.jirengu.com/difax/3/edit

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

推荐阅读更多精彩内容

  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 左...
    cctosuper阅读 269评论 0 0
  • 1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 一种左...
    晓风残月1994阅读 457评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 左...
    yuhuan121阅读 268评论 0 0
  • 1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 无限轮播...
    进击的前端_风笑影阅读 273评论 0 0
  • 一 在一堂大师的舞蹈课上,我遇到了一年前跟我学舞的学生。因为课堂学习比较紧张,我们只是点...
    性感有才的郭郭阅读 331评论 0 3