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

　　推荐阅读

　　javascript学习笔记(十二) RegExp类型介绍

1.匹配模式标记： g ------ 表示全局模式，而不是发现第一个匹配成功就立刻结束 i ------- 表示不区分大小写模式 m ----- 表示多行匹配，一行结束时向下一行继续匹配 复制代码 代码如下: //匹配第一个bat 或cat,不>>>详细阅读

本文标题：基于jQuery的360图片展示实现代码

地址：http://www.17bianji.com/kaifa2/JS/23324.html

 1/2    1