<script>jq1.9min.js</script> <script> (function(a){ a.fn.touchwipe=function(c){ var b={ drag:false, min_move_x:20, min_move_y:20, wipeLeft:function(){/*向左滑动*/}, wipeRight:function(){/*向右滑动*/}, wipeUp:function(){/*向上滑动*/}, wipeDown:function(){/*向下滑动*/}, wipe:function(){/*点击*/}, wipehold:function(){/*触摸保持*/}, wipeDrag:function(x,y){/*拖动*/}, preventDefaultEvents:true }; if(c){a.extend(b,c)}; this.each(function(){ var h,g,j=false,i=false,e; var supportTouch = "ontouchstart" in document.documentElement; var moveEvent = supportTouch ? "touchmove" : "mousemove", startEvent = supportTouch ? "touchstart" : "mousedown", endEvent = supportTouch ? "touchend" : "mouseup" /* 移除 touchmove 监听 */ function m(){ this.removeEventListener(moveEvent,d); h=null; j=false; clearTimeout(e) }; /* 事件处理方法 */ function d(q){ if(b.preventDefaultEvents){ q.preventDefault() }; if(j){ var n = supportTouch ? q.touches[0].pageX : q.pageX; var r = supportTouch ? q.touches[0].pageY : q.pageY; var p = h-n; var o = g-r; if(b.drag){ h = n; g = r; clearTimeout(e); b.wipeDrag(p,o); } else{ if(Math.abs(p)>=b.min_move_x){ m(); if(p>0){b.wipeLeft()} else{b.wipeRight()} } else{ if(Math.abs(o)>=b.min_move_y){ m(); if(o>0){b.wipeUp()} else{b.wipeDown()} } } } } }; /*wipe 处理方法*/ function k(){clearTimeout(e);if(!i&&j){b.wipe()};i=false;j=false;}; /*wipehold 处理方法*/ function l(){i=true;b.wipehold()}; function f(n){ //if(n.touches.length==1){ h = supportTouch ? n.touches[0].pageX : n.pageX; g = supportTouch ? n.touches[0].pageY : n.pageY; j=true; this.addEventListener(moveEvent,d,false); e=setTimeout(l,750) //} }; //if("ontouchstart"in document.documentElement){ this.addEventListener(startEvent,f,false); this.addEventListener(endEvent,k,false) //} }); return this }; })(jQuery); /* 调用 */ $("#aa").touchwipe({ wipeLeft:function(){ alert("向左滑动了")}, wipeRight:function(){alert("向右滑动了")}, }) </script> <div id="aa"> abcde </div>
相关推荐
demotouch
4. Elastislide:这款插件专注于响应式设计,拥有四种独特的过渡效果,集成了Touchwipe插件以支持触屏设备。Elastislide支持水平和垂直图片传送带,并能固定在屏幕底部显示,同时提供缩略图形式的预览。 5. ...
加入了一些动画效果|—— effect1-js 图片分割效果|—— imageSwitcher 使用原生javascript写的js图片切换效果|—— library| |—— jquery.mousewheel.js 基于jquery的绑定鼠标滚轮时间的插件| |—— touchwipe.js ...
5. 兼容性和优化:确保代码在不同浏览器上都能正常工作,同时考虑移动设备的触摸事件。可以使用jQuery的`.touchwipe()`插件来支持滑动切换。 6. 调整参数:根据实际需求,可以调整轮播速度、动画时间、是否循环播放...
在移动设备上,这种交互通常通过触摸滑动来实现,给用户提供无缝的浏览体验。在本文中,我们将探讨如何将Bootstrap的Carousel与dropload.js结合,以便在移动端实现滑动切换图片。 首先,Bootstrap Carousel的基本...