. 代碼如下:
$(function(){
var box_W = $(".PIC360").width();
var box_H = $(".PIC360").height();
var box_X = $(".PIC360").offset().left;
var box_Y = $(".PIC360").offset().top;
//求出中心點的橫坐標值
var center_X = Math.ceil(box_X+(box_W/2));
//求出中心點的縱坐標值
var center_Y = Math.ceil(box_X+(box_H/2));
var moveSetp = (box_W/2)/10//設定為10次移動，完成左邊的圖片顯示。這裡求出每次移動多少像素，算移動一次？;
$(".PIC360").mousemove(function(event){
var evX = event.pageX;
var evY = event.pageY;
//判斷是向左還是向左
if(center_X - evX>=0){
changePic(evX,evY,"left")
}else{
changePic(evX,evY)
}
function changePic(mX,mY,f){
if(f){
//求出鼠標移動了多少次，每次對應一個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.鼠標在圖片區域向左滑動，圖片“向左轉動”。
2.鼠標在圖片區域向右滑動，圖片“向右轉動”。
二、功能分析： 2.1如何判斷鼠標在圖片上面的滑動方向，即如何知道鼠標是向左還是向右？
以圖片的中心為參照，在中心點左邊，就是向左，在中心點右邊，就是向右。解決方法，是把鼠標當前的X坐標值，與中心點的X坐標值，相減如果是負數就是向左的，如果是正數，就是向右的。
2.2鼠標滑動多少距離，圖片切換一張（轉動的實質，是不同面的圖片，在切換顯示）?
分析：2.21整個圖片一共有18張，向左切換10張，向右就是切換8張。這樣所有的圖片，都能顯示出來，即可以有360度的效果。
2.22鼠標在圖片左邊和右邊移動的最大距離是圖片寬度的一半，如果我設定10次移動讓圖片全部切換一次，那麼就用這個最大距離除以10，就得到每次移動多少距離，算一次，而這一次就要切換一張圖片。
DEMO下載 http://demo.jb51.net/js/2012/mypic360/