手机触屏左右滑动广告图片

 

<div class="page_showpic" id="box_root"> 
	<div class="MProduct_basicImg01-d1_c1">
		<div class="img_box">
			<img src="" id="iframeimg">
		</div>
		<div class="bot_number_box">
			<div class="bot_number"><span id="page" class="current"></span>/<span id="total" class="total"></span></div>
		</div>
	</div>
</div>
<script type="text/javascript" src="/publicScripts/common/zepto.min.js"></script>
<script type="text/javascript">
var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;
$('#iframeimg').on('touchstart', function(e) {
	e.preventDefault();
	var point = e.touches[0];
	startX = point.pageX;
	startY = point.pageY;
	return false;
});
$('#iframeimg').on('touchmove', function(e) {
	e.preventDefault();
	var point = e.touches[0];
	endX = point.pageX;
	endY = point.pageY;
	return false;
});
$('#iframeimg').on('touchend', function(e) {
	var moveX = endX - startX;
	var moveY = endY - startY;
	if(Math.abs(moveY) < 50 && Math.abs(moveX) > 30 ){
		e.preventDefault();
		var direction = startX > endX ? 1 : -1;
		imgIndex = imgIndex*1 + direction;
		if(imgIndex >= imgs.length){
			imgIndex = imgs.length - 1;
		}else if(imgIndex < 0){
			imgIndex = 0;
		}
		if(imgs[imgIndex]){
			$("#iframeimg").attr("src",imgs[imgIndex]);
			$("#page").text(imgIndex*1 + 1);
		}
	}
	startX = 0;
	startY = 0;
	endX = 0;
	endY = 0;
	return false;
});
</script>