轮播图设计

 这篇放在CSS中感觉好奇怪啊，有空将它放到别的专栏。

  一、电商平台的轮播图（将会在以后添加交互）

 1.  首先在ul标签上设置了类img-list-container。在设置样式时，ul的宽高可设为与图片大小相同,margin设置 0 auto居中效果才会有。

 2. 在设置只让一个图片显示的效果时，借助overflow: hidden。但这时要考虑一个问题：你的所有图片是横向排列还是纵向排列的，还有一种方案是让它们全部重叠在一起。电商采用的是重叠在一起。

3.那么如何设置重叠呢？我们可以让图片脱离文档流，并设置层级，层级高的显示。在这里选择的是给给容器里的li开绝对定位。

4.在设置指示点时，可以再建立一个div，类名为indicator/pointer,然后根据图片的张数设置对应的a标签。给a标签设置宽高，注意a元素是行内元素，是不能设置宽高的，所以要先给个display，将其设置为block块。指示点的宽高可以自行设置，比如10px

5.但这时指示点还是看不见的，这是因为图片开了绝对定位，有了层级，所以指示点也应该开个绝对定位，那么是该给它的div容器开呢，还是给里面的a标签开呢。很明显，要给容器开，还要给它一个很高的层级，确保它不会被盖住。

6.此时指示点是纵向排列的，为了将它横向排列，我们可以给它开个浮动float:left；开启浮动后，元素脱离文档流，内联元素变成块元素，所以display：block就没必要了。

7.圆形 border-radius:50%        间距 margin:0 5px

8.那么如何将指示点放到我们想要的位置呢？现在如果直接给pointer加个bottom,那么它会到哪里呢？如果我们仔细观察，会发现，此时pointer是相对html定位的（因为ul,body都没有开启定位），所以我们需要给ul添加一个相对定位，这时的pointer才能相对ul定位，而不是html。

9.还有一个效果没有实现，那就是鼠标移到当前指示点时，指示点会变色。我们可以给第一个a标签加一个active类，样式中.pointer a.active{}中可设置背景颜色和边框（边框设置为透明的比较好）。注意此时还要调整.pointer a的样式的背景颜色和边框，目的是让它们统一大小，位置相齐。 最后再为这个样式加个.pointer a.active:hover。

                

 二、更加完善的轮播图

1.所需要的基本效果：

        ①自动播放

        ②鼠标停留时停止播放，并显示左右切换按钮

        ③点击左右按钮或者圆形下标时可手动切换

        ④图片可无缝切换，首尾图片切换时无违和感

   2.html结构

        大容器slider，里面三个区图片区，箭头区，指示点区。

   3.CSS样式

         如上配置

    4.JS交互（以后更新）