您的位置:首页 > 其它

手机触模的图片轮播

2015-11-18 15:10 253 查看
<!-- 图片轮播 --><div class="y-addWrap"><div class="swipe" id="mySwipe"><div class="swipe-wrap"><div><img class="img-responsive" src="palmst/img/banner_4.jpg"/></div><div><img class="img-responsive" src="palmst/img/banner_3.jpg"/></div><div><a href="http://mp.weixin.qq.com/s?__biz=MzA3MDQ4NDU3MA==&mid=400645075&idx=1&sn=88596b19ecfc47a616f7710a694f0686&key=d4b25ade3662d64344c0da3616ed7b527528ca73acceeea69a2859494f9270bd3c796d05955bc178e3b2f85d8d3a7977&ascene=1&uin=MTY4ODM1NzA4MA%3D%3D&devicetype=Windows+7&version=61050016&pass_ticket=R7KabzD5YgOtyx%2FwtsHVgOL5kilyTHp9kgwsM39EAo9Zhssj3hZ23BuNPsGT6VmX"><img class="img-responsive" src="palmst/img/banner_2.jpg"/></a></div><div><img class="img-responsive" src="palmst/img/banner_1.jpg"/></div></div></div><ul id="y-position"><li class="cur"></li><li class=""></li><li class=""></li><li class=""></li></ul></div><style>.y-addWrap{ position:relative; width:100%;background:#fff;margin:0; padding:0;}.y-addWrap .swipe{overflow: hidden;visibility: hidden;position:relative;}.y-addWrap .swipe-wrap{overflow:hidden;position:relative;text-align:center;}.y-addWrap .swipe-wrap > div {float: left;width: 100%;position:relative;}#y-position{ position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:none; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;}#y-position li{width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;}#y-position li.cur{background-color:#FF0000;}.img-responsive { display: block; max-width: 100%;  height: auto;width:100%;}</style><script src="palmst/js/swipe.min.js"></script><script type="text/javascript">var bullets = document.getElementById('y-position').getElementsByTagName('li');var banner = Swipe(document.getElementById('mySwipe'), {auto: 2000,continuous: true,disableScroll:false,callback: function(pos) {var i = bullets.length;while (i--) {bullets[i].className = ' ';}bullets[pos].className = 'cur';}});</script><!-- /图片轮播 -->========================其中
swipe.min.js内容如下:
function Swipe(e,t){"use strict";function c(){o=s.children,u=new Array(o.length),a=e.getBoundingClientRect().width||e.offsetWidth,s.style.width=o.length*a+"px";var t=o.length;while(t--){var n=o[t];n.style.width=a+"px",n.setAttribute("data-index",t),i.transitions&&(n.style.left=t*-a+"px",v(t,f>t?-a:f<t?a:0,0))}i.transitions||(s.style.left=f*-a+"px"),e.style.visibility="visible"}function h(){f?d(f-1):t.continuous&&d(o.length-1)}function p(){f<o.length-1?d(f+1):t.continuous&&d(0)}function d(e,n){if(f==e)return;if(i.transitions){var s=Math.abs(f-e)-1,u=Math.abs(f-e)/(f-e);while(s--)v((e>f?e:f)-s-1,a*u,0);v(f,a*u,n||l),v(e,0,n||l)}else g(f*-a,e*-a,n||l);f=e,r(t.callback&&t.callback(f,o[f]))}function v(e,t,n){m(e,t,n),u[e]=t}function m(e,t,n){var r=o[e],i=r&&r.style;if(!i)return;i.webkitTransitionDuration=i.MozTransitionDuration=i.msTransitionDuration=i.OTransitionDuration=i.transitionDuration=n+"ms",i.webkitTransform="translate("+t+"px,0)"+"translateZ(0)",i.msTransform=i.MozTransform=i.OTransform="translateX("+t+"px)"}function g(e,n,r){if(!r){s.style.left=n+"px";return}var i=+(new Date),u=setInterval(function(){var a=+(new Date)-i;if(a>r){s.style.left=n+"px",y&&w(),t.transitionEnd&&t.transitionEnd.call(event,f,o[f]),clearInterval(u);return}s.style.left=(n-e)*(Math.floor(a/r*100)/100)+e+"px"},4)}function w(){b=setTimeout(p,y)}function E(){y=0,clearTimeout(b)}var n=function(){},r=function(e){setTimeout(e||n,0)},i={addEventListener:!!window.addEventListener,touch:"ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,transitions:function(e){var t=["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"];for(var n in t)if(e.style[t]!==undefined)return!0;return!1}(document.createElement("swipe"))};if(!e)return;var s=e.children[0],o,u,a;t=t||{};var f=parseInt(t.startSlide,10)||0,l=t.speed||300;t.continuous=t.continuous?t.continuous:!0;var y=t.auto||0,b,S={},x={},T,N={handleEvent:function(e){switch(e.type){case"touchstart":this.start(e);break;case"touchmove":this.move(e);break;case"touchend":r(this.end(e));break;case"webkitTransitionEnd":case"msTransitionEnd":case"oTransitionEnd":case"otransitionend":case"transitionend":r(this.transitionEnd(e));break;case"resize":r(c.call())}t.stopPropagation&&e.stopPropagation()},start:function(e){var t=e.touches[0];S={x:t.pageX,y:t.pageY,time:+(new Date)},T=undefined,x={},s.addEventListener("touchmove",this,!1),s.addEventListener("touchend",this,!1)},move:function(e){if(e.touches.length>1||e.scale&&e.scale!==1)return;t.disableScroll&&e.preventDefault();var n=e.touches[0];x={x:n.pageX-S.x,y:n.pageY-S.y},typeof T=="undefined"&&(T=!!(T||Math.abs(x.x)<Math.abs(x.y))),T||(e.preventDefault(),E(),x.x=x.x/(!f&&x.x>0||f==o.length-1&&x.x<0?Math.abs(x.x)/a+1:1),m(f-1,x.x+u[f-1],0),m(f,x.x+u[f],0),m(f+1,x.x+u[f+1],0))},end:function(e){var n=+(new Date)-S.time,r=Number(n)<250&&Math.abs(x.x)>20||Math.abs(x.x)>a/2,i=!f&&x.x>0||f==o.length-1&&x.x<0,c=x.x<0;T||(r&&!i?(c?(v(f-1,-a,0),v(f,u[f]-a,l),v(f+1,u[f+1]-a,l),f+=1):(v(f+1,a,0),v(f,u[f]+a,l),v(f-1,u[f-1]+a,l),f+=-1),t.callback&&t.callback(f,o[f])):(v(f-1,-a,l),v(f,0,l),v(f+1,a,l))),s.removeEventListener("touchmove",N,!1),s.removeEventListener("touchend",N,!1)},transitionEnd:function(e){parseInt(e.target.getAttribute("data-index"),10)==f&&(y&&w(),t.transitionEnd&&t.transitionEnd.call(e,f,o[f]))}};return c(),y&&w(),i.addEventListener?(i.touch&&s.addEventListener("touchstart",N,!1),i.transitions&&(s.addEventListener("webkitTransitionEnd",N,!1),s.addEventListener("msTransitionEnd",N,!1),s.addEventListener("oTransitionEnd",N,!1),s.addEventListener("otransitionend",N,!1),s.addEventListener("transitionend",N,!1)),window.addEventListener("resize",N,!1)):window.onresize=function(){c()},{setup:function(){c()},slide:function(e,t){d(e,t)},prev:function(){E(),h()},next:function(){E(),p()},getPos:function(){return f},kill:function(){E(),s.style.width="auto",s.style.left=0;var e=o.length;while(e--){var t=o[e];t.style.width="100%",t.style.left=0,i.transitions&&m(e,0,0)}i.addEventListener?(s.removeEventListener("touchstart",N,!1),s.removeEventListener("webkitTransitionEnd",N,!1),s.removeEventListener("msTransitionEnd",N,!1),s.removeEventListener("oTransitionEnd",N,!1),s.removeEventListener("otransitionend",N,!1),s.removeEventListener("transitionend",N,!1),window.removeEventListener("resize",N,!1)):window.onresize=null}}}(window.jQuery||window.Zepto)&&function(e){e.fn.Swipe=function(t){return this.each(function(){e(this).data("Swipe",new Swipe(e(this)[0],t))})}}(window.jQuery||window.Zepto)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: