360 picture display implementation code based on jQuery_jquery

Copy code The 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;
//Find the abscissa value of the center point
var center_X = Math.ceil(box_X (box_W/2));
//Find the ordinate value of the center point
var center_Y = Math.ceil(box_X (box_H/2));
var moveSetp = (box_W/2)/10//Set to 10 moves , complete the picture display on the left. How many pixels are moved each time? ;
$(".PIC360").mousemove(function(event){
var evX = event.pageX;
var evY = event.pageY;
//Determine whether to the left or left
if(center_X - evX>=0){
changePic(evX,evY,"left")
}else{
changePic(evX,evY)
}
function changePic(mX,mY,f){
if(f){
//Find out how many times the mouse has been moved, Each time corresponds to the index of one LI.
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();
}
}
})
})

1. Function analysis:
　1. Slide the mouse to the left in the picture area, and the picture will "turn to the left" .
2. Slide the mouse to the right in the picture area, and the picture will "turn to the right".

2. Function analysis:
2.1 How to determine the sliding direction of the mouse on the picture, that is, how to know whether the mouse is moving left or right?
Take the center of the picture as a reference. To the left of the center point is to the left, and to the right of the center point is to the right. The solution is to subtract the current X coordinate value of the mouse from the X coordinate value of the center point. If it is a negative number, it is to the left. If it is a positive number, it is to the right.

2.2 How far does the mouse slide to switch between pictures (the essence of rotation is that pictures on different sides are switched and displayed)?
Analysis: 2.21 There are 18 pictures in total, and 10 pictures are switched to the left , to the right is to switch to 8 pictures. In this way, all pictures can be displayed, that is, a 360-degree effect can be achieved.
2.22 The maximum distance that the mouse can move on the left and right sides of the picture is half the width of the picture. If I set 10 moves to switch all the pictures once, then divide the maximum distance by 10 to get the distance moved each time. , counts once, and this time you need to switch a picture.

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