发表于： 2018-12-05 21:43:52
1 873
今天完成的事：
了解了bootstrap3栅格系统的列偏移，大致的写法是“<div class="col-md-... col-md-offset-..."></div>”其中offset-...代表12列的其中一列，写几就移几列。
对阴影效果有了解，基本语法：div{box-shadow:0 0 1px #000 inset;}
图解：
不用bootstrap实现轮播图
需要做到的：
- 在固定区域中，内部内容自行滑动切换形成播放的效果
- 当切换到最后一张内容时，会反向播放或者回到起点重播
- 每张内容会停留一段时间
- 内容可以点击/进行操作
dom结构搭建
首先要有一个容器作为轮播图的容器，同时由于要实现滑动切换，所以内部需要有一个装载所有待切换内容的子容器
如果子容器中的内容是左右切换的，则需要将内容左右排列开
.loop-wrap 是主容器
.loop-images-container 是承载内部图片的子容器
.loop-image 是图片内容，如果需要显示其他内容，可以自定义
css实现静态效果
轮播图内每一页内容的宽高应该相同，且等于主容器.loop-wrap宽高
.loop-images-container的宽高必然有一个大于外部主容器，overflow属性应该设置为hidden。
css实现轮播效果
轮播效果说到底就是一个动画效果，通过css3的新属性 animation 我们就可以自定义一个动画来达到轮播图效果。先来了解一下 animation 这个属性
animation 的 name 值是动画名，动画名可以通过 @keyframes 创建自定义动画规则
分析动画
要实现轮播，本质上是使内部承载内容的子容器 .loop-images-container 进行位移，从而使不同位置的内容一次展示在眼前
共有五张图片需要展示，如果轮播总耗时10s，那么每张图片应该有2s的时间(20%)，而每张图片耗时的构成是切换耗时+展示耗时，如果切换耗时500ms(5%)，展示耗时就应该是1500ms(15%)
于是这样改造css
纯css实现轮播图效果完成
明天计划的事：
继续任务八
遇到的困难：
不知道为什么会出现这种情况用的是栅格系统，下面用的是li标签，后面去掉ul标签就好了，但是友情链接那几个字依然在外面。
收获：
刚开始用栅格系统的时候钻了个牛角尖，总是想用了栅格系统如果我在去改它本身设置好的值就没有意义了，但是我突然醒悟为什么不能改，他的架构我不该，一些小的细节，比如每一列的宽度，用1会短用2会长，为什么我不能自己调节宽一个合适的宽度，对他的架构并够不成什么破坏。
返回列表
评论