轮播的实现

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

  • 轮播的原理就是使用定位属性控制一组图片在水平或者垂直方向的偏移数值,然后再给父容器设置一个overflow: hidden属性(设定好宽高),这样只会看到在父容器范围内的图片,然后整体效果看起来就好像是一组图片轮流播放一样。
  • 如果让我来实现的话有这些接口:
    1.playNext(len) 控制图片向右滚动,参数len代表滚动的图片个数
    2.palyPre(len) 控制图片向左滚动,参数len代表滚动的图片个数
    3.如果更抽象的话,还可以把playNext()和playPre()抽象成一个函数play(),只需要在play()里面增加一个判断,根据点击的按钮来决定向哪边滚动,然后在一些细节方面再修改一下就可以了。

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

代码链接

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

代码链接

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

推荐阅读更多精彩内容

  • 轮播的实现原理? 以四个图片的轮播为例html部分:图片存放在ul li标签内,并使用一个div包裹ulcss部分...
    放风筝的小小马阅读 637评论 0 0
  • 1、 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 首先把...
    zh_yang阅读 274评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 横...
    饥人谷_js_chen阅读 414评论 0 0
  • 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 轮播的实现原...
    Jeff12138阅读 318评论 0 0
  • 题目1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 滚动...
    抚年华轻过阅读 419评论 0 0