手机端的图片滑动怎么实现呀？？求大神帮忙看看。。

YZF1314 2014-07-18 11:19:09

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"  />

<title>无标题文档</title>

<style>

*{margin:0; padding:0;}



.box{width:100%; height:150px; position:relative; overflow:hidden; margin-top:40px;}

.box ul{display:-webkit-box; position:absolute; left:0; top:0;}

.box ul li{width:120px; height:150px; overflow:hidden; margin-right:5px;}

.box ul li img{width:120px; height:150px;/* -webkit-transform:translate(0,0); -webkit-transition:all .5s;*/}

</style>

</head>



<body>



<div class="box">

	<ul>

		<li><img src="img/1.jpg"></li>

		<li><img src="img/2.jpg"></li>

		<li><img src="img/3.jpg"></li>

		<li><img src="img/4.jpg"></li>

		<li><img src="img/5.jpg"></li>

		<li><img src="img/1.jpg"></li>

		<li><img src="img/2.jpg"></li>

		<li><img src="img/3.jpg"></li>

		<li><img src="img/4.jpg"></li>

		<li><img src="img/5.jpg"></li>

	</ul>

</div>

<script src="jquery-1.9.1.min.js"></script>

<script>

$(function(){

	var oUl = $('.box ul');

	var disX = 0;

	var i = 0;

	var endX = 0;

	var left = 0;

	

	var flag = false;

	oUl.bind('touchstart',function(){

		var touchs = event.touches[0];

		//alert(touchs.pageX);

		disX = touchs.pageX;

		left = parseInt(oUl.css('left'));

		

		oUl.bind('touchmove',function(){

			document.title=i++;

			var touchs = event.touches[0];

			event.preventDefault();

			endX = touchs.pageX-disX;

			oUl.css({'left':endX+left+'px'});

	

			//oUl.css({'webkitTransition':'all .4s'});

			/*if(flag){

				oUl.css({'webkitTransition':'all .4s'});

			}*/

		});

		

		oUl.bind('touchend',function(){

			//document.title='我抬起了';

			

				/*oUl.stop().animate({left:endX+left+'px'},800,function(){

					document.title='我抬起了';

				});*/

			oUl.css({'webkitTransition':'all .4s'});

			oUl.off('touchmove touchend');

		});

		

		/*oUl.bind('webkitTransitionEnd',function(){

			oUl.css({'webkitTransition':''});

		})*/

		//return false;

	});

});

</script>

</body>

</html>