web前端-js小记(17)-轮播的实现

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

  1. 滚动轮播的实现原理:
    设置所有的图片无缝隙的放在同一行,并对每张图片设置position:absolute;先再浏览器改变left数值,确定是否可以进行滚动,再编写JS,在第一张图片前clone最后一张图片,在最后一张图片后clone第一张图片,每次移到clone的图片的时候进行css({left})设置,让图片回到真正想要到的图片上。设置一个变量len,记录需要显示的下一张图片距离当前显示图片的距离个数,然后animate()方法进行滑动。
  2. 渐变轮播:
    对所有的图片设置隐藏并设置position:absolute;然后再浏览器修改每个图片的display,判断是否可以滚动,通过fadeIn()和fadeOut()渐变图片。
  3. 接口:
    前进函数,后退函数
    选择函数
    自动轮播函数

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

代码

题目3:实现一个渐变轮播效果, 效果范例339

代码

(mission 17)

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,139评论 25 709
  • 轮播的实现原理? 以四个图片的轮播为例html部分:图片存放在ul li标签内,并使用一个div包裹ulcss部分...
    放风筝的小小马阅读 639评论 0 0
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,273评论 4 61
  • 半夜里,被刚满周岁的女儿哀鸣声惊醒,看着她翻来覆去难受的样子,千万种焦虑涌上心头。白天就已喷嚏连连鼻涕不断,为了不...
    路茵阅读 341评论 0 0
  • 连载《想象每一本书都是一颗种子》简介:每天在最美书店工作,总会留意下读者喜欢什么样的书,什么样的书读者会追捧,什么...
    大为君David阅读 2,605评论 8 22