轮播

2017-06-30  本文已影响0人  madpluto

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

轮播的实现原理有两种:

  1. 将轮播的图片放置在一条直线上,只留出一个图片的宽度,其它图片均不可见。复制第一和最后一张图片放置在直线的最后和最前,当滚动上述两个图片时,回到该复制体原图片的位置。发生滚动时根据需要向左或向右偏移N*图片宽度的位置。
  2. 将轮播的图片放置在同一垂直平面上,记录当前图片编号和要滚动到的图片编号,轮播时显示要滚动到的图片,隐藏掉之前的图片

抽象出来的函数:

  1. playNext() 向后滚动
  2. playPre() 向前滚动
  3. setButtons() 直接点击跳转

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

http://js.jirengu.com/bowatuxoqe/1/edit

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

http://js.jirengu.com/kibuyayeka/2/edit

上一篇 下一篇

猜你喜欢

热点阅读