小菜学习前端开发 这2天一个前端开发的功能

小菜这2天照着视频学了一下前端开发的轮播功能

看视频感觉前端开发挺有意思的。

但听着都挺顺利，照着视频写也挺顺利，但视频一关掉就傻眼了，一脑袋懵圈了，不知该如何自己写了。

别乱喷啊，自己整理的，虽然步骤有点蠢。不过大家可以给我提点建议啥的。

就照着视频写了2变，然后又做了笔记（针对视频）

然后对着笔记又做了一边，还是出现各种失误，再一看之前的发现又想起来了，是不是失忆了啊。

笔记：

1、先建立一个大盒子（div）

设置宽高度、背景色。

2、在大盒子中建立ul li标签（10个li标签）

去除小黑点：list-style:none;

设置li宽高度

3、在li中建立img标签显示图片并设置宽高百分比

4、将图片定位在一起（绝对定位）

相对于大盒子定位，大盒子为参照物（大盒子设置：position:relative）

li为绝对定位：position:absolute;

5、设置第一个li标签的类名

将所有li标签设置层级为1；z-index:1

注：只有定位元素才有层级

6、将一个li标签的层级设置为3

将以一个li标签往右移，距离参照物175px

7、将第二个li标签设置类名，并设置宽高度，层级为2

8、设置第一个li标签类的宽高

9、设置li标签的宽高变小（等于第二个li标签，将第二个li标签宽高去掉）

10、设置li标签距离参照物上端的距离

11、设置第一个li标签类距离参照物上端的距离为0

12、设置最后一个li的类名，并设置right:0

13、设置第二个li类的left值为0

14、在大盒子中建立一个小盒子（div）存放2个按钮

15、将2个按钮定位

参照物：大盒子

设置定位属性top:50%

设置层级为最高层级：10，并分别为2个按钮设置左右两端的距离

16、去掉大盒子的背景色，设置li标签的背景色为#000（黑色）

17、设置img标签的透明度为：0.5opactiy:0.5;

18、将第一个li标签的img透明度改为1

19、设置2个按钮上下居中

20、将li中的类都设置left的值，去掉right的值

21、将其它li全部定位到中间

21、实现按钮功能（功能代码没研究明白，写点简单的）

找到按钮：$(".left")

按钮点击事件：$(".left").click();

获取所有li属性，然后再让li顺序切换

动画效果：animate({属性},事件);

获取所有li标签中的某一个：$("#flash ul li").eq(i)

效果图：