在这之前我们先看看我们要做的效果是什么样的：
我们要图片在过“一定时间”后自动切换，在右下角处有小方块似数字1,2,3,4，这些数字是根据图片的个数自动出现的，当鼠标经过的时候数字颜色有一定的变化；
下面我们来看看具体怎么实现。
第一步：先写简单的html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="https://www.jb51.net/js/jquery.js" ></script> <script type="text/javascript" src="https://www.jb51.net/scrollPic.js" ></script> <link href="https://www.jb51.net/scrollPic.css"> </head> <body> <div> <ul> <li><img src="https://www.jb51.net/images/1.jpg" /></li> <li><img src="https://www.jb51.net/images/2.jpg" /></li> <li><img src="https://www.jb51.net/images/3.jpg" /></li> <li><img src="https://www.jb51.net/images/4.jpg" /></li> </ul> </div> </body> </html>
页面代码解析：首先建立scrollPic.html,scrollPic.js,scrollPic.css。二话不说先把要的三个基本的文件建好；然后把它引入到html中在head头部，其中注意
src="https://www.jb51.net/js/jquery.js"
这个代码的意思，“../”表示跳出上级目录，然后在js文件夹下查找jquery.js文件；
在html页面中，我们在body中添加一个class为'pic-slider-io'的div，在div中有一个ul，li下面有四张图片，注意：图片事先设置好命名，为1.jpg,2.jpg......方便在编写scrollPic.js；
先看看这个时候什么都没做的页面样式：
可以看到图片是一原来的大小平铺在页面上的，一默认ul li的方式展现在页面上的；
现在我们要把它放在左下角；
第二步：编写css样式来控制它
首先控制div的展现：
.pic-slider-io{ height : 200px; //设置div的高为200px； width : 800px; //设置div的宽为800px； float : letf; //float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 position : relative; //position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定 //位元素会相对于它在正常流中的默认位置偏移。relative 生成相对定位的元素，相对于其正常位置进行定位。 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写好如下：