笔记:带缩略图幻灯片

原创 猫腿子 随笔 javascript随笔 455阅读 2017-08-28 23:47:54 举报

看了慕课网的一个视频学习的。

笔记:带缩略图幻灯片

CSS需注意这几点:
①样式分幻灯片区域跟控制条区域,控制条区域的样式分hover(出现缩略图等)状态和active(缩略图不显示等)状态,同时在控制条active的状态时,幻灯片及标题也给了一个active的状态。
②缩略图加了个倒影的样式 -webkit-box-reflect (明几天再另写个笔记作详解)
③为了使幻灯片区域active状态及标题active状态有fadeIn的效果,先对两者的定位分别做了right50%和margin-right:-45px的偏移。等active状态再还原到应该在的位置r(right:0和margin-right:0);
别忘了加上transition属性。且标题的动画时间应该比幻灯片区域的动画时间长一些或者做一些时间的延迟,才能保证在幻灯片之后发生动作。如:transition: all 1s .8s;

JS需要注意:
考虑到实际项目中数据都是由后台提供,这次用的是自定义的数据来定义内容。
addSlider()函数里做的是定义html结构是事情,先拿到初始的HTML结构,在用正则表达式替换变量构成可传入数据的HTML结构,再写会到DOM里。
switchSlider(n)函数做的是切换 幻灯片的工作。每一张的幻灯片给了id为main{{index}},每一个控制按钮id为ctrl{{index}},然后在点击控制条的时候把{{index}}也就是(1,2,3,4,5,6,7)当中的一个当做参数传递给函数,则想对应id的幻灯片及控制条分别加 一个类名main-i_active和ctrl-i_active

其他不想记了,还是上代码吧
html 代码

之前后台拿数据的话是直接把页面结构写出来,跟视频的不一样,所以贴一遍以前的写法:

javascript 代码

还有一个要说的点差点忘了。页面结构还没出来就动态改图片位置,视频里是做了延迟但会出现第一张图闪现的bug。所以我用document.onreadystatechange来监听页面加载状态再更改图片位置。
代码:
html 代码

最后,感谢代码陪我过七夕。 泪目(内心麻木)= =

评论 ( 1 )
最新评论
猫腿子 2017-08-28 23:56:23 1F

这个点还有三个浏览。心疼你们。