Example of self-testing Implementation of sliding Images Using jquery _ jquery

Recently, I used jquery to write an image slide plug-in. Although there are still some problems, it is easy to use. I hope to help you. I am reviewing some of my previous basic knowledge, I used jquery to write an image slide plug-in. Although there are still some problems, it is easy to use. You only need to bind the slideW () function to the target element. This function supports up to two inputs, they are the width after the image changes and the animation speed. If no value is input, the default width and the default speed are used.

The following is an example of my own test:

The Code is as follows:

// Html code

Css code

The Code is as follows:

// Css code
* {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 Code

The Code is as follows:

// Js Code
// Jquery achieves image sliding effect
Var zyljq = $. noConflict ();
Zyljq. fn. extend ({
SlideW: function (wid, speed ){
// The width to be set for wid. You can set the minimum width or the maximum width.
// If this parameter is not set, the default width is calculated based on the width of the bound element.
// Set the animation speed, which can be normal, slow, fast, or millisecond.
// If this parameter is not set, the default speed is normal.
That = this; // bind all elements of the event
Var eleNum = zyljq (this). size (); // obtain the number of images
Var curwidth = zyljq (this). width (); // obtain the original width of the image.
If (! Wid ){
Wid = Math. round (curwidth * 4/5 );
// If the animation termination condition is not set, the default condition is calculated.
}
If (zyljq. trim (speed) = ""){
// If no speed is set, the default speed is used.
Speed = "normal ";
}
If (! IsNaN (speed )){
// Changes if a negative value is set.
Speed = speed <0? -Speed: speed;
}
// Calculate the maximum and minimum width of the photo
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 );
// Bind a hover event
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 );
});
}
});

The following is the view:
Original effect:

The effect of hovering the cursor over the second element:

In this process, we also reviewed some common problems, such as: in earlier ie versions, the problem of margin: 0 auto; non-resident, the problem of display: inline-block; not supported. You may still have many questions that you have not noticed. If you have any questions, please feel free to give us your guidance. Everyone can make progress together.