这个原理其实很简单的。知道html5只是html+css3+js的全程，所以控制图片的定位都是有css的一个position属性来做的，图片无非就是去改变定位中的left值。知道这个之后就可以接下来的实现步骤：当然，这些只是实现逻辑。具体细化功能这个自己去调整。原理知道其他的都简单的很。
10年积累的成都网站设计、网站建设、外贸网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有安化免费网站建设让你可以放心的选择与我们合作。
第一步：将N张图片去排版定位。
第二步：现在已经知道了这3张图片的位置，接下来就是去点击它，改变他的位置，这个点击其实用js就很容易实现。onclick点击事件，可以搜下；
第三步:图片就这样切换了。假设手机屏幕宽是50像素的，现实不是这样，所以需要加个遮照。就是在这个滚动的图片上再加一层div去遮住不去显示的图片（当然这是一种蔗照方法）。
把要实现滚动图片的图片进行重叠，再利用javascript实现滚动效果，left-=*px，或者left+=*px
1、创建两个html文件，一个test一个test2。
2、打开test页面，在里面创建一个div，并给其添加onmousedown与move方法。
3、打开后我们发现是一个棕绿的页面。
4、定义两个变量，startx为鼠标按下的坐标，endx为鼠标移动的坐标。
5、实现鼠标点击执行的down方法，在里面通过clientX获得鼠标按下坐标，并赋值给startx。
6、接着在实现鼠标移动的move方法，获得鼠标移动的坐标，并通过startx与endx相减判断是否向左边滑动大于30的距离，是的话就切换到test2页面。
7、现在我们打开test页面，向左滑动会提示切换页面（这个可以去除），确定后就切换到了test2页面，向右滑动切换的方法同理。
我大概理解到了你的意思，是想实现背景的视觉差效果吧。如果是这个的话两种方法，
一种是设置background-attachment:fixed;背景固定了
另外一种就是利用 animate css3的属性，想兼容更多的浏览器建议用jquery控制。感觉应该是你想要的效果了。
你说的这个是单页面效果。我给你个网址上面有好多这样的
一、关于拖拽API
拖拽API是HTML5的新特性，相对于其他新特性来说，重要程度占到6成，实际开发中使用比例占到3成，学习要求个人认为是达到掌握即可的程度。
二、什么是拖拽和释放？
拖拽：Drag
释放：Drop
拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了
三、什么是源对象和目标对象？
源对象：指的是我们鼠标点击的一个事物，这里可以是一张图片，一个DIV，一段文本等等。
目标对象：指的是我们拖动源对象后移动到一块区域，源对象可以进入这个区域，可以在这个区域上方悬停(未松手)，可以释松手释放将源对象放置此处(已松手)，也可以悬停后离开该区域。
四、拖拽API的相关函数
解释了什么是源对象和目标对象后，回归前端中的拖拽API，由上面的操作我们可以得出几个函数
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
拖拽API总共就是7个函数！！
五、如何在拖动的源对象事件和目标对象事件间传递数据
HTML5为所有的拖动相关事件提供了一个新的属性：
e.dataTransfer { } //数据传递对象
功能：用于在源对象和目标对象的事件间传递数据
源对象上的事件处理中保存数据：
e.dataTransfer.setData( k, v ); //k-v必须都是string类型
目标对象上的事件处理中读取数据：
var v = e.dataTransfer.getData( k );
