文章出自本人博客: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事件触发之后触发。两个方法可以阻止鼠标事件触发:
- 不执行与事件关联的默认动作。即使用return false; 或者event.preventDefault();但此方法将使图片失去打开链接功能。
- 当touchMove被执行时,鼠标点击事件mouseClick会被自动取消。
分享到:
相关推荐
jquery slideshow.js幻灯片插件_淡出淡进图片轮播
内容索引:脚本资源,jQuery,图文滚动,图片滚动,jQuery插件 jQuery Accessible Slideshow,是用jQuery编写的一款图文左右滚动的特效插件,在页面中设置DIV或UL区域,在里面你可以布局图片和文字,甚至是列表等内容,...
$('#slideshow .a_bigImg img').soChange({ thumbObj:'#slideshow .ul_change span', thumbNowClass:'on', changeTime:4000 }); </SCRIPT>
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 jQuery+CSS实用图片收缩与放大效果...
jQuery.slideShow,自述文件: 2011-04-21, 描述这是一个非常简单易用的jquery幻灯片插件。 它将自动创建幻灯片放映,并在图像列表之外导航。 该插件还提供了不同的回调和选项,可让您自定义slideShow对鼠标悬停,...
Slideshow-1.3.1.110417
Slideshow jquery图片画廊插件
jquery_slideshow 用于网络的图像幻灯片
插件描述:漂亮的全屏Slideshow幻灯滑块效果(jQuery). 参考示例:http://www.jq22.com/jquery-info5657
jQuery幻灯片播放 Slideshow2!.zipjQuery幻灯片播放 Slideshow2!.zip很好很强大!!!
摘要:脚本资源,jQuery,JS幻灯片,图片切换 CSS & jQuery Slideshow独特的JS幻灯效果,用在购物网站或电影娱乐网站都可以,有多种的图片切换方式,而且兼容性也相当好,欢迎大家学习使用。
NULL 博文链接:https://edison87915.iteye.com/blog/1842723
用jQuery写的小型的slideshow插件
第一阶段,试用slideshow 在做一个网页homepage的时候,想用slideshow[1]做图片切换效果,其中js部分代码如下: 代码如下: function next_slide() { var $active = $(‘#bitware-overlay img.active’); if ($...
One of the most popular and easy to use jquery slideshow library
SlideShow ScrollView Pro SlideShow ScrollView Pro 是一个滑动UI选择插件。您可以将其用作关卡选择、奖杯、成就、历史、图像演示等。 使用教程链接:...
Frontpage SlideShow 的管理功能不仅体现在自带图像上传、删除功能上,而且它的组件可以分“类别”来创建多个幻灯,而它的配套模块在参数中就有“要展示的幻灯类别 ID”这一项。这就是说,一个“类别”就相当于一组...
Frontpage SlideShow 的管理功能不仅体现在自带图像上传、删除功能上,而且它的组件可以分“类别”来创建多个幻灯,而它的配套模块在参数中就有“要展示的幻灯类别 ID”这一项。这就是说,一个“类别”就相当于一组...
SlideShow-- 实现多达11种图像切换特效(包括向上扫描,向左扫描,马赛克,水平栅条,淡入淡出等),利用GDI+进行画图。
$('#slideshow .a_bigImg img').soChange({ thumbObj:'#slideshow .ul_change span', thumbNowClass:'on', changeTime:4000 }); </SCRIPT>