html5滑动图片,web滑动图片

用html5开发前端app，触摸图片会滑动到下一张图片，请问怎么弄？

这个原理其实很简单的。知道html5只是html+css3+js的全程，所以控制图片的定位都是有css的一个position属性来做的，图片无非就是去改变定位中的left值。知道这个之后就可以接下来的实现步骤：当然，这些只是实现逻辑。具体细化功能这个自己去调整。原理知道其他的都简单的很。

第一步：将N张图片去排版定位。

第二步：现在已经知道了这3张图片的位置，接下来就是去点击它，改变他的位置，这个点击其实用js就很容易实现。onclick点击事件，可以搜下；

第三步:图片就这样切换了。假设手机屏幕宽是50像素的，现实不是这样，所以需要加个遮照。就是在这个滚动的图片上再加一层div去遮住不去显示的图片（当然这是一种蔗照方法）。

相关问答

Q1: HTML5中，是怎么实现滚动图片的？

把要实现滚动图片的图片进行重叠，再利用javascript实现滚动效果，left-=*px，或者left+=*px

Q2: html5怎么实现页面左右滑动（下图区域），可以左右滑动但不需要换页

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页面，向右滑动切换的方法同理。

Q3: html5怎样设置一个背景图片随着滚轮变动

我大概理解到了你的意思，是想实现背景的视觉差效果吧。如果是这个的话两种方法，

一种是设置background-attachment:fixed;背景固定了

另外一种就是利用 animate css3的属性，想兼容更多的浏览器建议用jquery控制。感觉应该是你想要的效果了。

你说的这个是单页面效果。我给你个网址上面有好多这样的

Q4: html5图片拖动的代码

一、关于拖拽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 );