在此之前，让我们看看我们要做什么：

我们希望图片在一定时间后自动切换。右下角有像数字1、2、3和4这样的小方块。这些数字会根据图片数量自动出现。当鼠标经过时，数字的颜色会有一定程度的变化；

让我们来看看如何实现它。

第一步：先写一个简单的网页

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /脚本类型=' text/JavaScript ' src=' http :/js/jquery . js '/脚本脚本类型=' text/JavaScript ' src=' http : crollpic . js '/脚本链接rel='样式表' href=' scrolpic . CSS '/流浆池div class=' pic-slider-io ' ul liimg src=' http : images/1 . jpg '/Li liimg src=' http : images/2 . jpg '/Li liimg src=' http 3333二话不说，先把三个基本文件建好；然后把它引入到html的头部标题中，其中注

src='http: '的含义./js/jquery.js '，"./"表示跳出上级目录，然后在js文件夹下查找jquery.js文件；在html页面上，我们添加了一个div，主体中有一个“pic-slider-io”类，div中有一个ul。下面有四张照片。注：图片名称提前设置，分别为1.jpg、2.jpg.方便编写scrollPic.js；让我们来看看此时没有任何作用的页面样式：

可以看到，图片以原始尺寸平铺在页面上，并以默认的ul li模式显示在页面上；现在我们必须把它放在左下角；

第二步：编写css样式来控制它。首先，控制div的呈现：pic-slider-io { height : 200 px；//将div的高度设置为200px；宽度： 800px//将div的宽度设置为800px；float : letf//float属性定义元素浮动的方向。在过去，这个属性总是被应用到图像上，所以文本被包裹在图像周围，但是在CSS中，任何元素都可以浮动。浮动元素生成块级别的框，不管它是什么类型的元素。相对位置：//position属性指定元素的定位类型。该属性定义了用于建立元素布局的定位机制。任何元素都可以定位，但绝对或固定元素会生成块级框，而不管元素本身的类型如何。相对//位元素偏离其在正常流中的默认位置。相对生成相对定位的元素，该元素相对于其正常位置定位。溢出：隐藏；//overflow属性指定当内容溢出元素框时会发生什么。隐藏的内容将被修剪，其余内容将不可见。}查看页面样式：

看到所有的图片都走在一起了，图片本身比div的宽度和高度都大，所以溢出：隐藏不会显示其他溢出，但这绝对不是我们想要的，不用急着继续；然后，我们现在控制ul的风格：pic-slider-io ul { margin : 0px；//将上、下、左、右外边缘设置为0；填充： 0px//将内边距上下左右设置为0；注意：边距、填充的设置有：上、右、下、左；例如边距：2px、4px、5px、8px分别对应上、右、下、左；高度：自动；//自适应高度，浏览器自动计算宽度： 100%；//宽度为100%列表样式类型： none//从左浮动：中移除li点；显示：块；//此元素将显示为块级元素，前后有一个绝对的换行符位置：//生成绝对定位的元素，该元素相对于除静态定位之外的第一个父元素进行定位。top : 0；左： 0；z指数： 98；//z-index属性设置元素的堆叠顺序。堆叠顺序较高的元素总是在堆叠顺序较低的元素之前。}此时不会显示图片，页面会看到左上角的点被去掉；

第三，我们控制李的风格：pic-slider-io ul Li { height : auto；宽度： 100%；向左浮动：padding: 0pxmargin: 0px飞越：隐藏；z索引：1；//这个li层比ul的栈高。}这种风格的设置主要是让li的堆叠高于ul，相当于浮在ul上；

最后，我们来看看img的风格：pic-slider-io ul Li img { width : 100%；z索引：1；//将图片和li设置在同一层，这样应该就可以了}现在我们来看看页面是什么样子的：

看到了吗，风格设置好之后，整个画面就显示出来了；

第三步：编写scrollPic.js在编写js的时候，我们要在右下角添加图片的数字显示。我们将预先添加的css编写如下：pic-page-BTN {//这是父div中的子div样式，用于显示右下角的数字轴承模块float3360Left宽度：自动；height: 30px绝对位置：bottom: 20pxright: 20pxz-index : 99；//他的叠加比父div高，所以把这个按钮样式放在图片上}。pic-page-btn span{ //这是设置子div的数字样式height: 30px宽度： 30px；背景色： # 999；display:块；向左浮动：线高： 30px；文本对齐：中心；color : # FFF；margin-right : 10px；cursor:pointer指针；}.图片-页面-btn。current {//这是背景色-color: #1D5D76设置鼠标滑过并改变其背景色；}接下来我们来看看js的编译。这里不是视频，就不一步一步说了。我用js代码注释了所有的解释

Js代码：

$ (function () {$)。scrollPic=function(options){//定义了一个scroll pic函数，它有一个用于调用的参数；/* * * * * Vardefaults={ ele : '。pic-slider-io '，//pic-slider-io是一个样式在css中定义的类；时间： '2000 '，//时间定义为滑动时间；Autoscroll : true//将auto scroll设置为true意味着自动切换图片；};* * * * * var opts=$。extend({}，默认值，选项)；//$(opts.ele)可以理解为采取这种执行方式，而$(. class 1 ')。单击()；类似的表示，然后理解为分配给微微对象；//或者这样理解，$(opts.ele)就是$('。pic-slider-io’)，除了(。pic-slider-io是作为参数的类，所以应该用(opts.ele)表示；var PiCobject=$(opts . ele)；//PicObject.find('ul ')，可以理解为$(opts.ele)。find('ul ')，因为opts.ele实际上是一个获得的类，//相当于$(')。pic-slider-io’)。find(' ul ')；然后分配给scrollist，这样整体就用scrollist表示了；var scrollist=PiCobject . find(' ul ')；//同样，scrollList.find('li ')也可以表示为$(')。pic-slider-io’)。查找(' ul ')。find(' Li ')；所以这是逐层搜索的。如果看到html，会更清晰。var listLi=scroll list . find(' Li ')；//图片名称为1.jpg，2.jpg这样，索引用来表示图片名称的初始值为0；var索引=0；//这是一个定义了picTimer(自动切换功能)的函数；var picTimer//a li包含一张图片，所以这是为了找出有多少张图片，并将其分配给len；var len=PicObject.find('li ')。长度；/* * * *//调用showPic(index)函数(下图)索引；If(index==len){//如果index的值等于len，则表示从第一张图片到最后一张图片的切换完成，然后将index赋值为0，以index=0重新开始；} }/* * * *//set interval()方法将连续调用该函数，直到调用clearInterval()或关闭窗口。//这个判断是，如果autoscroll为真，则连续调用picTimer函数，if (opts。自动滚动){var Time=setinterval (pictimer，opts。时间)将以时间的速度被调用；}/* * * * *引入了listLi.hide()函数；//fadeIn()方法使用淡入效果显示隐藏的选定元素。兄弟()方法是遍历的。listLi.eq(索引)。法丁(500)。兄弟姐妹()。hide()；//查找分页对应的css样式。如果与当前索引一致，则添加类为当前的css样式；否则，将其移除。PicObject.find(分页)。eq(指数)。addClass('current ')。兄弟姐妹()。removeClass('当前')；}/* * * * * * * * * * * *结束动画功能* * * * * * * * * * * * * * * * * * * * * *这是用pic-slider-io类添加一类pic-page-in div。

//主要是在右下角设置带有pic object . append(' div class=' pic-page-BTN '/div ')的数字；//将该类为pic-page-btn，1，2，3、//的子div中图片数对应的数字相加，由此可以看出，这些数字不是一一相加的，而是根据li的个数自动生成的，即图片数(I=1；i=leni ){ PicObject.find . '。pic-page-btn ')。追加(' span ' I '/span ')；}//这是var paging=picobject。查找('。pic-page-btnspan ')，与上面提到的listLi相同；//更改分页的背景颜色。eq(指数)。右下角对应数字的add class(' current ')；}});我们几乎完成了这里的图片切换。

那么让我们调用html中的默认值，看看：

调用方法：

脚本类型=' text/JavaScript ' $(function(){ $)。scroll pic()；});/script查看界面显示：

看箭头，表示画面可以自动切换；但是我们可以在鼠标滑过右下角1，2，3，4时切换图片，这样我们就可以给js添加一个事件：

//鼠标经过1、2、3、4的效果：picobject.find(分页)。mouse over(function(){ index=pico object . find(分页))。索引($(this))；showPic(索引)；//调用showPic(index)函数。});//鼠标经过1、2、3和4。//清除计时器。//鼠标悬停在1、2、3、4上，相当于切换图片。//所以我们要清除计时器，尝试pico object . hover(function(){ clearinterval(time)；//这是相对于setInterva()；}，function(){ if(opts . auto scroll){ time=setInterval(Pictimer，opts。时间)；}else{ clearInterval(时间)；} });将这段代码添加到js中，不要说它是在哪里添加的。增加

paging.eq(索引)。add CLaSS(' current ')；后面还行；

这样就完成了一个全画面切换的插件；如果需要调用函数，可以修改Ele、Timer和AutoScroll。查看带有参数的插件：

脚本类型=' text/JavaScript ' $(function(){ $)。scrollpic ({ele: '。pic-slider-io '，//插件应用divtime3360' 3000 '，//自动切换时间autoscroll3360 true，//设置是否自动淡入淡出})；});/剧本好吧，就算整个插件故事讲完了，希望大家都能从中学习到知识，如果有什么不足，我还是希望能理解！(最后，写整个js的时候，最好写在$(function(){ })；在前面添加分号，以防止与其他js冲突)