I recently reviewed some of my previous basic knowledge and wrote an image slide plug-in using jquery. 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: the width after the image changes and the animation speed. If no input is made, the default width and the default speed are used.
The following is an example of my own test:
Copy codeThe Code is as follows:
// Html code
<Div class = "content">
<Ul class = "list">
<Li class = "liimg"> <span class = "imgli img1"> </span> </li>
<Li class = "liimg"> <span class = "imgli img2"> </span> </li>
<Li class = "liimg"> <span class = "imgli img3"> </span> </li>
<Li class = "liimg"> <span class = "imgli img4"> </span> </li>
</Ul>
</Div>
Css code
Copy codeThe 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
Copy codeThe 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.