轮播图的书写

轮播图结构搭建 ( htm 和 css 部分)

总体思路：

1.html 和 css 搭建基础布局，让若干图片折叠到一起，并且透明度设置为0，让其不显示。

2.定义 active 类名，设置样式，透明度为1，层级显示为1，将 active 类名添加在默认第一张图片上，就可以显示第一张图了。

3.通过 js获取到对应元素，不断控制active类名跳转到不同的容器上，实现最终的效果。

html 和 css 涉及的知识点包括：flex布局、相对定位绝对定位、过渡属性等等...

1.html 创建整体结构，里面包含了三部分，分别是图片区域、切换按钮区域和焦点区域。

图片区域：

图片区域使用ul>li搭建结构

左右切换按钮：

通过div搭建结构

焦点区域：

焦点区域通过ol>li搭建结构

同时起好类名，方便css获取元素

——html

2.css书写布局，实现基本展示

首先给最大的盒子设置固定宽高，水平居中，设置position:relutive;因为子容器需要用到绝对定位。

图片区域部分：

图片的ul 和 li 的宽高都设置100%，同时ul也需要设置position:relutive;因为 li需要absolute;

切换按钮部分：

容器设置absolute，top:40%,设置固定宽高、背景颜色、字体水平垂直居中、边框圆角属性等等。

左切换按钮设置left:0;

右切换按钮设置right:0;

焦点盒子区域：

盒子设置absolute属性，right:20px; bottom:20px; 设置固定宽高、背景颜色、边框圆角以及设置display:flex;使其变为弹性盒子。

子元素默认横向around排列，align-items:center;圆角100%。

子元素的active 属性是背景颜色高亮，只要区别于其他子元素的背景色就可以了。

3.js部分

a.获取元素

获取的元素包括，所有图片盒子下面的(li)、两个切换按钮和所有的焦点盒子下面的li

图片：通过DOM获取图片盒子下所有的li，并声明变量接收返回值

切换盒子(两个)：通过DOM获取切换盒子，需要先给盒子设置id值，声明变量接收返回值

 焦点：通过DOM获取焦点盒子下所有的li，并声明变量接收返回值

b.定义索引

本质上，是通过js控制图片索引的跳转，实现切换上一张或下一张的功能，再配合间隔定时器实现自动切换图片的功能。

var index = 0

将索引值设置为0

c.设置索引跳转

首先给获取到的所有图片元素添加active类名，这样就可以让每一张图片都显示了，因为在此之前，所有的图片都默认是不显示的。

但是这样做同样有一个问题，就是当所有的图片都有active类名，这样就达不到显示一张图片的同时其他图片隐藏的效果了。那么就需要清除其他图片的active类名，只要当前这一张的图片有active类名就可以了。

d.清除active类名

通过for循环，遍历所有的图片元素，执行取消active类名的代码。

for(var i = 0;i < imgs.length;i ++) {imgs[i].className = 'img'};

把这个循坏封装在函数里，再声明变量变量接收这个函数方法，那么我们每次在执行跳转索引的方法前，先执行一次清除active类名的方法，这样就达到了我们的要求。

e.给左右按钮绑定点击事件

实现操作上一张或下一张的功能

左按钮：

我们点击左按钮的时候，图片肯定是往前翻的，那么图片的索引也是一直在减小的，所以可以定义 index --；

当索引减到0时，我们需要让索引变为最后一张图片的索引就即可。书写完成后还需要调用下跳转索引的方法就能实现切换上一张图片的功能了。

右按钮同样的方法也可以实现。

f.焦点盒子事件

通过DOM获取到所有焦点盒子下面的li，再重复跟图片元素一样的跳转索引和清除索引的方法。那么设置好了后，当我们点击左按钮或右按钮切换图片的时候，焦点盒子的高亮也会一起切换显示。

g.通过焦点切换到对应图片的索引

实现方法仍然是依靠索引的跳转，可以通过向ol>li传输数据的方式，获取到对应的数据值。

通过DOM获取到所有焦点盒子下面的li，通过for循环遍历所有的li给它们绑定点击事件，在点击事件里面设置一个方法，这个方法的功能就是接收ol>li传输的数据值，接收到以后，声明变量存储这个值，再把变量赋值给index，最后再调用跳转索引的函数。经过这些操作，就可以实现点击焦点按钮，图片跳转到对应索引的图片了。

h.自动播放图片

这也是整个环节里面最简单的步骤了，通常也是最后一步，通过间隔定时器，调用跳转索引的函数，再设置间隔的时间，一个简单的轮播图就做好了。