发表于: 2017-07-10 22:37:45

1 1037


今日所做

1.找职位页有个推荐公司的轮播图,和banner轮播图不一样的是这个轮播图
需要上下轮播,之前用的轮播图插件没有这个功能,因此去看了一下用js写
轮播图的教程,打算写一个上下方向轮播的轮播图
2.看了下轮播图实现的基本原理,html和css方面就是先做一个container,
设置好container的高和宽,然后在里面放置一个div,div里面放置所有要
展示的图片,每张图片的宽高都和container是一样的,为了使container每次
只展示一张照片,所以要使用overflow:hidden以隐藏多余的其他照片,包裹
图片外面的div的position是absolute
3.js部分主要就是通过控制图片外面的div的left值来展示不同的图片,然后
设置定时器,固定一个时间来轮播图片,然后对left值要有一个判断,如果到
了最后一张图片则跳到第一张,第一张图片前面是是最后一张等等
4.设置轮播图底下的小圆圈和图片保持同步,基本上功能就实现了,然后下一步
就是把通过控制left值来控制图片轮播改成通过控制top值来控制图片的上下
轮播,从逻辑上讲这个不难实现,但是有个问题就是这样做出来的轮播图视觉效果
很不好,没有一个变化的过程,最终决定放弃自己写,用插件
明日计划:
把找职位页面做完
遇到的问题:
记得做css任务的时候好像需要用到轮播图,当时简单地做了一下,有一些动画效果,
但是因为没有使用js,不能实现点击箭头控制轮播的效果,现在可以使用js了,又
不知道如何跟css结合做出有一定动画效果的轮播图
今日收获:
学习了一下轮播图的做法
完成了推荐公司轮播图的样式


返回列表 返回列表
评论

    分享到