比如像京东的页面这样，这些图片在手机上是可以左右滑动，但是页面上不会有滑动条显示的，我有的思路大概是这样
<div style="overflow: hidden;background: #000;overflow-x: auto;z-index: 1;margin-top: 10px;" >
<div style="width: 600px;">
<div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:green; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:red; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div>
</div>
</div>
但是这样的话会出现一个滑动条，
还有一种就是写touchStart，这种事件的方法，但是写这种事件我只能做到手指划动多少，图片移动多远距离，做不出来向京东展示商品那样那种很顺畅的感觉，这一块要怎么实现， 有没有大神给些代码或是给点思路，或是提供一下第三方插件也行
我所能实现的代码如下， 但是都不太理想：
<!DOCTYPE html>
<html>
<head>
<title>商品查询</title>
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var startX = 0,moveX = 0;c = 0;
var isFirst = 0;
$(function() {
function touchStart(e){
isFirst ++;
startX = e.touches[0].pageX;
}
function touchMove(e){
moveX = e.touches[0].pageX;
if(isFirst == 1)
c = moveX - startX;
else{
c = c + (moveX - startX);
startX = moveX;
}
$('#spText').html('移动' + (moveX - startX) + '总偏'+c);
$('#abc')[0].style.webkitTransform = 'translate(' + c + 'px)';
}
$('#abc')[0].addEventListener("touchstart",touchStart,false);
$('#abc')[0].addEventListener("touchmove",touchMove,false);
})
</script>
</head>
<body id="body">
<div style="overflow: hidden;background: #000;" >
<div style="width: 600px;" id="abc">
<div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:green; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:red; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div>
</div>
</div>
<div style="overflow: hidden;background: #000;overflow-x: auto;z-index: 1;margin-top: 10px;" >
<div style="width: 600px;">
<div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:green; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:red; "></div>
<div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div>
</div>
</div>
<span id="spText">X轴移动大小：0</span>
</body>
</html>
