jQuery實現圖片漸入漸出切換展示效果_jquery

.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 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
}

.pic-slider-io ul li {
 height: auto;
 width: 100%;
 float: left;
 padding: 0px;
 margin: 0px; 
 overflow: hidden;
 z-index:1; //這個li層就比ul那個疊層更高
}

.pic-slider-io ul li img{ 
 width: 100%;
 z-index:1;//設置圖片和li在同一層上，這個應該沒問題吧
}

.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;
}