手机触模的图片轮播

转载 2015年11月18日 15:10:02

<!-- 图片轮播 -->
	<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[n]]!==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)



手机图片轮播

  • 2014年12月09日 10:24
  • 2.41MB
  • 下载

手机图片轮播

  • 2014年09月19日 18:49
  • 704KB
  • 下载

react 手机端touch 图片轮播

import React, { Component, PropTypes } from 'react';const styles = require('./DoctorSchedulesCard.sc...

适合手机的图片轮播图

最近要用到手机上的图片轮播图,在网上找了一些代码,发现都是写死的宽高,在手机上没法自适应,实在找烦了,就自己动手写了一段脚本,当时是依赖我们强大的jquery的,目前在手动干预滚动后,自动滚动会停止。...

简单的图片轮播 可以自定义样式

  • 2017年12月05日 20:15
  • 24.37MB
  • 下载

移动端H5图片轮播缩放

  • 2017年10月23日 14:45
  • 1.08MB
  • 下载

+【CSS3】使用纯css代码实现图片轮播效果

使用纯CSS3代码实现简单的图片轮播。 1.基本布局: 将5张图片左浮动横向并排放入一个div容器(#photos)内,图片设置统一尺寸,div宽度设置5个图片的总尺寸,然后放入相框容器div(#f...
  • rtian001
  • rtian001
  • 2015年09月15日 20:58
  • 41827

myfocuns前端图片轮播JS插件

  • 2017年08月14日 17:34
  • 1.51MB
  • 下载

3维效果的jquery图片轮播特效

  • 2017年04月12日 11:43
  • 22KB
  • 下载

bootstrap图片轮播

这里写图片描述 bootstrap图片轮播
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手机触模的图片轮播
举报原因:
原因补充:

(最多只允许输入30个字)