jq轮播

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

  • 轮播实现的原理:
    图片左浮动,图片的父元素要绝对定位,宽度可以通过JS计算,这样通过改变图片父容器left的属性,可以依次把图片显示出来。(注意:要把头部的图片复制到尾部,把尾部的图片复制到头部,不然会出现空白,当刷到最后一张图片(复制)时,实际上跳到第一张图片,同理,倒退到第一张图片(复制),实际上跳到最后一张图片)

  • 要注意的点
    1.可以设置一个全局的变量imgIndex,控制四张图片的顺序
    2.要设置一个状态锁
    3.jq 返回的length 不是动态的
    4.尽量要抽象出可以复用的函数

可以抽象的函数: prePlay(),nextPlay() ,play()

题目2: 实现视频中的左右滚动无限循环轮播效果
https://jsxiaocainiao.github.io/demos/%E8%BD%AE%E6%92%AD/%E8%BD%AE%E6%92%AD.html
题目3: 实现一个渐变轮播效果, 效果范例441
https://jsxiaocainiao.github.io/demos/%E8%BD%AE%E6%92%AD/%E6%B7%A1%E5%85%A5%E8%BD%AE%E6%92%AD.html

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

推荐阅读更多精彩内容