Example of jquery implementing sliding picture test by yourself

Example of jquery implementing sliding picture test by yourself_jquery

WBOY

Release： 2016-05-16 17:17:29

Original

1264 people have browsed it

Recently I was reviewing some basic knowledge from the past and wrote a picture sliding plug-in using jquery. Although there are still some problems, the usage is very simple. Just bind the slideW() function to the target element. This function supports up to two inputs. , respectively the width after the picture changes, and the speed of the animation. If not entered, the default width and default speed will be used.

The following is an example of my own test:

Copy the code The code is as follows:

//html code

css code

Copy 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

Copy code The code is as follows:

 
//js code
//jquery to achieve picture sliding effect
var zyljq = $.noConflict(); 
zyljq.fn.extend({ 
slideW:function(wid, speed){ 
//The width to be set by wid can be set to the minimum width or the maximum width 
//If not set, the default setting will be calculated based on the width of the bound element width. 
//speedThe animation running speed to be set can be normal, slow, fast, or milliseconds. 
//If not set, the default speed is normal 
that = this; //Bind all elements of the event 
var eleNum = zyljq(this).size(); //Get the image Quantity
var curwidth = zyljq(this).width();//Get the original width of the image
if(!wid){ 
wid = Math.round(curwidth*4/5); 
//If the termination condition of the animation is not set, the default situation is calculated 
} 
if(zyljq.trim(speed) == ""){ 
//If the speed is not set, then the Default speed 
speed = "normal"; 
} 
if(!isNaN(speed)){ 
//If a negative value is set, change 
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 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); 
}); 
} 
}); 

Here is the view:
Original effect:
Example of jquery implementing sliding picture test by yourself_jquery

The effect after hovering the mouse over the second element:
Example of jquery implementing sliding picture test by yourself_jquery

During this process, some common problems were also reviewed, such as : In lower versions of IE, margin: 0 auto; is not centered, and display: inline-block is not supported. There may be many problems that have not been noticed. If you find any problems, your guidance is welcome. We can all make progress together.