第一步:将N张图片去排版定位。
第二步:现在已经知道了这3张图片的位置,接下来就是去点击它,改变他的位置,这个点击其实用js就很容易实现。onclick点击事件,可以搜下;
第三步:图片就这样切换了。假设手机屏幕宽是50像素的,现实不是这样,所以需要加个遮照。就是在这个滚动的图片上再加一层div去遮住不去显示的图片(当然这是一种蔗照方法)。
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页面,向右滑动切换的方法同理。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)