发表于： 2017-03-18 23:54:04
1 619
今天完成的事情：不用框架，用CSS+JS实现了下拉菜单和轮播图
明天计划的事情： 完成任务15
遇到的问题：设置下拉菜单的时候，按钮总是会占满一排，这里不给按钮设置宽度，用汉堡包图标做按钮，然后在外面裹一个WIDTH:100%的DIV，让汉堡包右浮动，但是做到这里之后，下拉菜单展开之后，子元素会因为按钮浮动，跑到和按钮一排。
这里给子元素设置clear：both，清除浮动，就可以正常显示了。
JS的代码看不懂。。直接复制过来的
CSS实现轮播图，不能实现按钮控制，只能设置成自动播放。
原理是
将4张图片左浮动横向并排放入一个div容器内，图片设置统一尺寸，div宽度设置4个图片的总尺寸，然后放入相框容器div，相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。然后再设置动画，使用css3动画，用@keyrames函数来实现 infinite 来实现无限循环播放，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。4张图片，需要切换3次。
但是不知道怎么实现播完最后一张之后回到第一张，身边师兄都不知道。
收获：学会了用CSS实现轮播图，还有CSS+JS实现下拉菜单
返回列表
评论