JQuery-based 360 image display implementation code

Copy codeThe Code is as follows: $ (function (){
Var box_W = $ (". PIC360"). width ();
Var box_H = $ (". PIC360"). height ();
Var box_X = $ (". PIC360"). offset (). left;
Var box_Y = $ (". PIC360"). offset (). top;
// Obtain the abscissa value of the center.
Var center_X = Math. ceil (box_X + (box_W/2 ));
// Obtain the ordinate value of the center.
Var center_Y = Math. ceil (box_X + (box_H/2 ));
Var moveSetp = (box_W/2)/10 // It is set to move 10 times to display the picture on the left. Here, how many pixels are moved each time ?;
$ (". PIC360"). mousemove (function (event ){
Var evX = event. pageX;
Var evY = event. pageY;
// Determine whether it is left or left
If (center_X-evX> = 0 ){
ChangePic (evX, evY, "left ")
} Else {
ChangePic (evX, evY)
}
Function changePic (mX, mY, f ){
If (f ){
// Determine how many times the mouse is moved, and each time it corresponds to a LI index.
Var index = Math. ceil (Math. abs (mX-center_X)/moveSetp ));
$ (". PIC360 li"). eq (index). show (). siblings (). hide ();
} Else {
Var index = Math. ceil (Math. abs (mX-center_X)/moveSetp ));
Var li_lengt = $ (". PIC360 li"). length;
$ (". PIC360 li"). eq (li_lengt-index). show (). siblings (). hide ();
}
}
})
})

I. Function Analysis:
1. Move the mouse over the image area to the left, and the image is "left ".
2. Move the mouse over the image area to the right and turn the image to the right ".

Ii. Function Analysis:
2.1 How do I determine the moving direction of the mouse over the image, that is, how do I know whether the mouse is left or right?
Take the image center as a reference. On the left of the center, it is left, right on the right of the center, that is, right. The solution is to subtract the current X coordinate value of the mouse from the X coordinate value of the center. If it is a negative number, it is left. If it is a positive number, it is right.

2.2 how long is the mouse sliding distance, and the image is switched over (the essence of the rotation is different from the picture, in the switching display )?
Analysis: there are 18 images in 2.21, 10 images are switched to the left, and 8 images are switched to the right. In this way, all images can be displayed, with a 360-degree effect.
2.22 The maximum distance between the left and right sides of the image is half the width of the image. If I set 10 moves to make the image switch once, divide the distance by 10, the distance between each movement is calculated once, and an image needs to be switched this time.

DEMO download http://demo.jb51.net/js/2012/mypic360/