overflow : hidden; //overflow 属性规定当内容溢出元素框时发生的事情.hidden 内容会被修剪，并且其余内容是不可见的。
}
看一下页面样式：
看到所有图片都在一起去了，图片的本身大于div的宽高，所以overflow：hidden这个就把其他溢出的就不显示了，不过这肯定不是我们想要的，不急继续；
然后，我们现在控制ul的样式：
.pic-slider-io ul{
margin : 0px; //设置上下左右的外边距都为0；
padding : 0px;//设置上下左右的内边距都为0； 注意：margin,padding的设置是：上，右，下，左；如margin ： 2px,4px,5px,8px;分别对应的是上，右，下，左；
height : auto; //自适应高度，浏览器自动计算
width : 100%; //宽度为100%
list-style-type : none; //把li的点去掉
float : left;
display : block; //此元素将显示为块级元素，此元素前后会带有换行符
position : absolute;//生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
top : 0;
left : 0;
z-index : 98;//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
}这个时候图片就不显示了，页面看到的是把左上角那个点去掉了；
再次，我们控制li的样式：
.pic-slider-io ul li {
height: auto;
width: 100%;
float: left;
padding: 0px;
margin: 0px;
overflow: hidden;
z-index:1; //这个li层就比ul那个叠层更高
}这个样式的设置主要是把li的叠层高于ul 就相当于浮在ul上面；
最后，我们来看看img的样式：
.pic-slider-io ul li img{
width: 100%;
z-index:1;//设置图片和li在同一层上，这个应该没问题吧
}
现在我们来看看页面成什么样了：
看到，经过样式设置，整个图片都显示出来了；
第三步：编写scrollPic.js
在编写js的时候，我们要添加右下方的图片数字显示，我们事先把要添加的css写好如下：
.pic-page-btn {//这是在父div中的子div样式，用于显示在右下角的数字承载模块
float: left;
width: auto;
height: 30px;
position: absolute;
bottom: 20px;
right: 20px;
z-index: 99; //他的叠层比父级div还要高，把这个按钮样式放在图片之上
}
.pic-page-btn span{ //这个是设置子div的数字样式
