为jQuery slideshow增加触摸滑动功能

阅读更多

文章出自本人博客：http://www.tarobjtu.com/blog/slide-show-touch-move/

 

       最近项目中多处用到slideshow（图片浏览）功能，但不同项目客户希望的实现方式不同，功能不一，如果在现有jQuery plugin插件上修改的话，一来会有未知bug，二来改他人代码比自己重写还费事，索性自己写一个。想添加什么功能由自己。
        其中一个项目需要支持PC与智能机，这牵涉出两个问题，一是跟随屏幕尺寸变更问题，二是触摸屏滑动实现切换图片功能。

跟随屏幕尺寸变更问题

       共有3种类型尺寸，PC端屏幕宽度960px，手机竖屏320px，手机横评480px。页面布局方面用CSS3的media query实现尺寸调整。JS端实在没办法，只能通过监听浏览器窗口尺寸变化实现横竖屏切换时，slideshow的正常运转。

 

触摸屏滑动实现切换图片功能

       如果不熟悉解智能手机（iOS与Android）浏览器触摸事件的话，可以先阅读这两篇文章：
1、《针对多点触控浏览器进行的开发》（翻译的比较僵硬，有些术语不够专业，但好文章一枚）
2、《基于JavaScript touch事件的自定义按钮示例》
以下贴出我的代码实现：

// $display ： 图片的显示窗口
// .banner img ： 图片本身
$display.on('touchstart', '.banner img', function(e){
	var touch = e.originalEvent,
		startX = touch.changedTouches[0].pageX;
						
	$display.on('touchmove', function(e){
		e.preventDefault();
						
		touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
						
		if(touch.pageX - startX > 10){
			$display.off('touchmove');
			reflash(function(){
				var next = index.prev();
				animate(next, 'prev');
			});
		}
		else if (touch.pageX - startX < -10){
			$display.off('touchmove');
			reflash(function(){
				var next = index.next();
				animate(next, 'next');
			});
		}
	});
					
	/* return false; */
					
}).on('touchend',function(){
	$display.off('touchmove');
});

   

触摸事件与鼠标点击事件

项目中的图片包含一个链接，当用户操纵图片时，到底是触发mouseClick事件还是touchStart,touchMove,touchEnd事件成为一个困惑。iOS与Android事件的运行机制避免了这个问题。
       鼠标点击事件在触摸事件touchStart,touchEnd事件触发之后触发。两个方法可以阻止鼠标事件触发：

1. 不执行与事件关联的默认动作。即使用return false; 或者event.preventDefault();但此方法将使图片失去打开链接功能。
2. 当touchMove被执行时，鼠标点击事件mouseClick会被自动取消。