在這之前我們先看看我們要做的效果是什么樣的：
我們要圖片在過“一定時間”后自動切換，在右下角處有小方塊似數字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="../js/jquery.js" ></script> <script type="text/javascript" src="scrollPic.js" ></script> <link rel="stylesheet" href="scrollPic.css"></head><body> <div class="pic-slider-io"> <ul> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> </ul> </div> </body></html>
頁面代碼解析：首先建立scrollPic.html,scrollPic.js,scrollPic.css。二話不說先把要的三個基本的文件建好；然后把它引入到html中在head頭部，其中注意
src="../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寫好如下：
.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的數字樣式 height: 30px; width: 30px; background-color: #999; display: block; float: left; line-height: 30px; text-align: center; color: #FFF; margin-right: 10px; cursor:pointer;}.pic-page-btn .current {//這是將要設置鼠標滑過改變其背景顏色 background-color: #1D5D76;}下面，我們來看看js的編寫，在這里不是視頻，就不一步一步的講了，我把各個解釋都注釋在js代碼中了
js代碼：
$(function(){ $.scrollPic = function (options){ //定義了一個scrollPic函數，有一個傳參，用于調用； /************************開始整個默認插件參數講解*******************************/ //整個defaults以花括號包含的是默認的參數，調用此插件的只需要修改ele，Time，autoscroll即可； var defaults={ ele: '.pic-slider-io', //pic-slider-io是一個class，css中定義了其樣式； Time : '2000', //Time是定義了滑動的時間； autoscroll : true //autoscroll設為true表示自動切換圖片； }; /************************結束整個默認插件參數講解*******************************/ //$.extend({},defaults, option)有{}主要是為了創建一個新對象，保留對象的默認值。 var opts = $.extend({}, defaults, options); //$(opts.ele)可以理解為取這個執行，與$('.class1').click();類似表示，然后理解為賦值給PicObject； //或者這樣理解,$(opts.ele)就是$('.pic-slider-io')，只不過（.pic-slider-io是個class作為參數，所以要(opts.ele)來表示）； var PicObject = $(opts.ele); //PicObject.find('ul')，這個可以理解成$(opts.ele).find('ul'),因為opts.ele其實就是取得的一個class， //相當于$('.pic-slider-io').find('ul');然后賦值給scrollList，所以整個就用scrollList來表示他； var scrollList = PicObject.find('ul'); //同理scrollList.find('li')可以表示為$('.pic-slider-io').find('ul').find('li');所以這個是一層一層來查找的如果你看到html就會更加清晰； var listLi = scrollList.find('li'); //圖片的命名是1.jpg,2.jpg,這樣的，index是用來表示圖片的名字的初始化賦值為0； var index = 0; //這是定義一個picTimer(自動切換函數)的函數； var picTimer; //一個li中包含一個圖片，所以這是查找有多少個圖片，賦值給len； var len = PicObject.find('li').length; /*****************開始自動切換函數************************/ function picTimer(){ showPic(index);//調用showPic(index)函數(在下面) index++; if(index == len){//如果index的值等于len，就表示從第一張圖片到最后一張圖片切換完了，然后是index賦值為0重新開始 index=0; } } /*****************結束自動切換函數************************/ //setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。 //setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉 //此判斷為如果autoscroll為true，則不停的調用picTimer函數，以Time的速度調用 if(opts.autoscroll){ var time = setInterval(picTimer,opts.Time); } /*****************開始動畫函數************************/ function showPic(index){//定義動畫函數 //listLi是找到第一個li，然后隱藏他，listLi在var listLi = scrollList.find('li');已經介紹了 listLi.hide(); //fadeIn() 方法使用淡入效果來顯示被選元素，假如該元素是隱藏的。siblings()方法是遍歷。 listLi.eq(index).fadeIn(500).siblings().hide(); //找到paging對應的css樣式，如果與當前的index一致，則添加class為current的css樣式，否則就移除。 PicObject.find(paging).eq(index).addClass('current').siblings().removeClass('current'); } /*****************結束動畫函數************************/ //這是在class為pic-slider-io的div中添加一個class為pic-page-btn的子div。 //主要是設置右下角數字的承載 PicObject.append('<div class="pic-page-btn"></div>'); //在這個class為pic-page-btn的子div中添加圖片張數對應的數字個數，1,2,3，，，，， //從這可以看出來，數字不是自己一個個添得，是根據li的個數，也就是圖片的個數自動生成的 for( i=1;i<=len;i++){ PicObject.find('.pic-page-btn').append('<span>'+i+'</span>'); } //這個就是和上面講listLi一樣的 var paging = PicObject.find('.pic-page-btn span'); //為相應的右下角的數字改變其背景顏色 paging.eq(index).addClass('current'); }});在這我們差不多完成了圖片的切換，
然后我們在html中先調用默認的看一看：
調用方式：
<script type="text/javascript">$(function(){ $.scrollPic(); }); </script>看一下界面顯示：
看箭頭所示，說明可以自動切換了圖片；
可是我們還有當鼠標在右下角1,2,3,4上滑過的時候，可以切換圖片，所以我們就在js中加個事件就可以了：
//鼠標經過1、2、3、4的效果 PicObject.find(paging).mouseover(function(){ index = PicObject.find(paging).index($(this)); showPic(index); //調用showPic(index)函數。 }); //鼠標經過1、2、3、4的效果 //清除計時器 //當鼠標懸浮在1,2,3,4上面的時候，就相當于要切換圖片了 //所以我們就要清除計時器，重新來過了 PicObject.hover(function(){ clearInterval(time);//這個是相對于setInterva()的； },function(){ if(opts.autoscroll){ time = setInterval(picTimer,opts.Time); }else{ clearInterval(time); } });把這段代碼加如到js中，加到什么位置就不要說了吧！加到
paging.eq(index).addClass('current');
后面就可以了；
這樣整個這個圖片切換的一個插件就算完成了；
如果需要調用函數，可以修改ele,Timer,autoscroll.
看一下帶參數使用插件：
<script type="text/javascript"> $(function(){ $.scrollPic({ ele: '.pic-slider-io', //插件應用div Time:'3000', //自動切換時間 autoscroll:true, //設置是否自動漸變 }); }); </script>好了，整個插件的講述就算是完成了，希望大家可以從中學到知識，如有不足，還望諒解?。ㄗ詈笳f一句，在整個js的編寫時，最好在$(function(){});的最前面加個分號，防止與其他js沖突）
新聞熱點
疑難解答
