jquery實作滑動圖片自己測試的範例_jquery

最近正在回顧之前的一些基礎知識，用jquery寫了一個圖片滑動的插件，雖然還是有些問題存在，用法很簡單，只要在對目標元素綁定slideW()函數即可，該函數最多支援兩個輸入，分別是圖片變化之後的寬度，以及動畫的速度，如果不輸入，則採用預設的寬度以及預設的速度。

以下是我自己測試的範例：

複製程式碼 程式碼如下:

程式碼如下:



程式碼如下:



程式碼如下:

程式碼如下:程式碼如下:

程式碼如下:



程式碼如下:
🎜>//html代碼

• span>

css程式碼複製程式碼

程式碼如下:

//css程式碼
*{margin:0px;padding:0px;list-style-type:none;}
body{text-align:center;}
.content{width:590px ;margin:0 auto;text-align:left;}
.list{width:565px;margin:0px 9px;border:1px solid #eee;padding:5px;display:inline-block;}overflow:hidden;}
.liimg{padding:4px;border:1px solid #aaa;border-radius:2px;display:inline-block;*display:inline;*margin:0px 3px;background:#FFF;width:auto;}}
.imgli{margin:2px 0px;width:125px;height:300px;display:inline-block;}
.img1{background:url(images/img1.jpg) no-repeat 50% 50%; }
.img2{background:url(images/img2.jpg) no-repeat 50% 50%;}
.img3{background:url(images/img3.jpg) no-repeat 50% 50%; }
.img4{background:url(images/img4.jpg) no-repeat 50% 50%;}


js程式碼



js程式碼




複製程式碼


程式碼如下:


//js程式碼
//jquery實作圖片滑動效果
var zyljq = $.noConflict() ;
zyljq.fn.extend({
slideW:function(wid,speed){
//wid要設定的寬度，可以設定變成最小時的寬度或變成最大時的寬度
//如果不設置，則會根據綁定元素的寬度，計算設定預設寬度。
//speed要設定的動畫運作速度，可以是normal,slow,fast，也可以是毫秒數。
//如果不設置，則預設速度是normal
that = this; //綁定該事件的所有元素
var eleNum = zyljq(this).size(); //取得圖片的數量
var curwidth = zyljq(this).width();//取得圖片的原始寬度
if(!wid){
wid = Math.round(curwidth*4/5);
//如果沒有設定動畫的終止條件，則計算出預設的情況
}

if(zyljq.trim(speed) == ""){
//如果沒有設定速度，則取預設速度
speed = "normal";
} if(!isNaN(speed)){
//如果設定了負值，則變化
speed = speed }
//計算照片的最大和最小寬度if(wid > curwidth){ widMin = Math.floor((eleNum*curwidth - wid)/(eleNum- 1)) "px"; widMax = ((curwidth*eleNum) - widMin*(eleNum-1)) "px"; }else{ widMax = Math.floor((eleNum*curwidth - wid*(eleNum-1))) "px"; widMin = wid "px"; } //console.log("widMax=" widMax ";widMin=" widMin); //綁定hover事件zyljq(this).hover(function(){ zyljq(that).stop(); zyljq(this).animate({width:widMax} ,speed); zyljq(that).not(this).animate({width:widMin},speed); },function(){ zyljq(that).stop(); zyljq(that).animate({width:curwidth},speed); }); } }); 下面是視圖： 原始效果：  滑鼠懸停在第二個元素上之後的效果：  在這個過程中，也回顧了一些常見的問題，例如：ie低版本下，margin:0 auto;不居中的問題，display：inline-block;不支援的問題。也許還有很多的問題沒有註意到，如果您發現了什麼問題，歡迎您的指導。大家可以共同進步。