移动端图片滑动
这是一个移动端的图片滑动，因为移动端的滑动带有弹性，所以pc端的滑动在移动端
很生硬。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <style> body{ margin: 0; } body,html{ width: 100%; height: 100%; } ul,li{ padding: 0; margin: 0; list-style: none; } #container{ width: 100%; position: relative; overflow-x:hidden; height: 156px; } #imgBox{ position: absolute; top: 0; left: 0; } #imgBox li{ float: left; } </style> <script src="jquery.js"></script> <script> $(function(){ switchImg("imgBox"); }) function switchImg(id){ /*初始化*/ var $imgBox=$("#"+id); var $img=$("img",$imgBox); $img.css("width",$("body").width()); $imgBox.css("width",$img.width()*$img.length); /*获取图片width*/ var imgWidth=$img.width(); $imgBox[0].addEventListener("touchstart",myStart); var startPos=0,imgPos=0,num=0,startTime=0; function myStart(ev){ startPos=ev.changedTouches[0].pageX; imgPos=parseFloat($imgBox.css("left")); //获取时间戳，单位毫秒 startTime=Date.now(); $imgBox[0].addEventListener("touchmove",myMove); $("body")[0].addEventListener("touchend",myEnd); } function myMove(ev){ var movePage=ev.changedTouches[0].pageX; var moveDistance=(movePage-startPos)/3+imgPos; $imgBox.css("left",moveDistance); } function myEnd(ev){ $("body")[0].removeEventListener("touchend",myEnd); $imgBox[0].removeEventListener("touchmove",myMove); var endPos=ev.changedTouches[0].pageX; var distance=endPos-startPos; if(Math.abs(distance)>$("body").width()/2||(Date.now()-startTime<100&&distance!=0)){ if(distance<0){ num=++num>$img.length-1?$img.length-1:num; }else{ num=--num<0?0:num; } } $imgBox.animate({"left":-num*$("body").width()},400); } } </script> </head> <body> <!-- 编程就是和生活一样，只要观察生活中的细节，其实你就会发现生活很多逻辑和编程逻辑吻合 --> <!-- ios的滑屏 --> <!-- 1、使用到touchstart/touchmove/touchend,拖拉拽写法差不多 --> <!-- 2、如果想出现拖的位置和移动位置不符，只要移动位置减少即可，如除以3 --> <!-- 3、touchend是关键，图片移动需要它去判断，如ios手指抬起时所触发的各种可能，弹回，快速抬起的切换图片(使用时间确定速度) ,手指缓慢移动需要移动一半的屏幕才切换图片等等，还有切换到首张或末尾时弹回的 还有使用运动函数，如jquery-》animate或别的库的运动函数 还有解除touchmove的事件函数， 还有event对象获取位置是event.changeTouches[0].pageX event.changeTouches获取手指列表和其操作。 --> <div id="container"> <ul id="imgBox"> <li><img src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> </ul> </div> </body> </html>
