Some of the basics of the past are being reviewed, using jquery to write a picture sliding plug-in, although there are still some problems, the usage is very simple, as long as the target element binding Slidew () function, the function can support up to two input, the picture is the width after the change, as well as the speed of animation, If not entered, the default width and the default speed are applied.
Here are some examples of my own tests:
Copy Code code 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 Code code 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;p Adding: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 Code code as follows:
JS Code
jquery to achieve picture sliding effect
var zyljq = $.noconflict ();
Zyljq.fn.extend ({
Slidew:function (wid,speed) {
Wid the width you want to set, you can set the width when it becomes minimum or when it becomes maximum
If not set, the default width is calculated based on the width of the bound element.
Speed you want to set the animation speed, can be normal,slow,fast, or can be the number of milliseconds.
If not set, the default speed is normal
That's = this; Bind all elements of this event
var elenum = ZYLJQ (this). Size (); Get the number of pictures
var curwidth = ZYLJQ (this). width ();//Get the original width of the picture
if (!wid) {
WID = Math.Round (CURWIDTH*4/5);
If the animation's termination condition is not set, the default is calculated
}
if (Zyljq.trim (speed) = = "") {
If the speed is not set, the default speed is taken
Speed = "normal";
}
if (!isnan (speed)) {
If a negative value is set, the change
Speed = Speed < 0?-speed:speed;
}
Calculate the maximum and minimum width of a 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);
Binding hover Events
ZYLJQ (this). Hover (function () {
ZYLJQ (that). Stop ();
ZYLJQ (This). Animate ({width:widmax},speed);
Zyljq. Not (this). Animate ({width:widmin},speed);
},function () {
ZYLJQ (that). Stop ();
ZYLJQ (that). Animate ({width:curwidth},speed);
});
}
});
The following are views:
Original effect:
The effect of the mouse hovering over the second element:
In this process, also reviewed some common problems, such as: IE low version, margin:0 Auto; not centered problem, display:inline-block; There may still be a lot of questions not noticed, if you find any problems, you are welcome to guide. We can make progress together.
