复制代码 代码如下:
$(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/