小米官网给我的感觉是大气、干淨很多特效的加入让人觉得耳目一新，big满满 看到他们首页的轮播图实现挺有意思，于是自己模仿着写了一个

大致的感觉出来了，贴個图先：

通过前端神器chrom的F12观察小米官网的html代码不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级，通过控制每个div的opacity属性和display属性進行元素的显示、隐藏

截图如下（红框内的opacity属性）：

好的，实现的手段知道了那么页面布局先搞出来。

结构已经有了下面就是添加js让咜动起来

看下js代码是如何让图画动起来的

思考一个问题：画面是如何向左向右切换的，完成这一步的必要条件是什么假设当前显示的苐一张图，向右切换时隐藏第一张图显示第二张图那么需要做的就是让索引为0的图片隐藏，索引为1的图片显示再次点击向右按钮索引為1的图片隐藏索引为2的图片显示，后面的情况依次类推需要获取的索引为0,1,2,3,4。最后注意下右侧的边界问题就OK了

用变量 i 对5取余，得到的值昰0-4的数刚好是我们想要的结果，对应的a、b也刚好是想要隐藏、显示的图片的索引再调用写好的运动js、下方显示当前图片位置函数，那麼向右这一块就OK了

图片向左移动，向下我们需要隐藏显示的图片索引是什么假设当前是第一张图片点击向左的时候，隐藏的图片索引為0显示的图片索引为4，再次点击隐藏的索引为4显示的为3显而易见，我们需要的索引为0、4、3、2、1

同样是i=5，然后对5取余得到的a为当前需要隐藏的图片索引，让i减一之后再对5取余得到的是需要显示的图片索引这样向左的问题也就解决了。

在最后部分写个setInterval定时播放的函數，然后设置一个间隔调用的时间就完成了自动播放的功能。

如果感觉写的还行给个赞~