手机触模的图片轮播


<!-- 图片轮播 -->
	<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.οnresize=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.οnresize=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)



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现手机端轮播图,可以使用Swiper插件。Swiper是一个流行的移动端触摸滑动插件,可以方便地实现轮播图效果。以下是一个简单的实现示例: 1. 引入Swiper插件的CSS和JS文件。 ```html <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> ``` 2. 创建一个HTML容器,并在其中添加轮播图图片。 ```html <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="image1.jpg"></div> <div class="swiper-slide"><img src="image2.jpg"></div> <div class="swiper-slide"><img src="image3.jpg"></div> </div> <div class="swiper-pagination"></div> </div> ``` 3. 初始化Swiper插件,并设置参数。 ```javascript var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, // 其他参数 }); ``` 其中,`pagination`参数表示要显示分页器,`el`表示分页器的容器选择器。 4. 可点击放大 如果想要实现点击放大的功能,可以使用一些其他的插件,例如PhotoSwipe、lightGallery等。这些插件可以方便地实现图片的放大和缩小效果。以下是一个使用PhotoSwipe实现可点击放大的示例: 1. 引入PhotoSwipe的CSS和JS文件。 ```html <link rel="stylesheet" href="https://unpkg.com/photoswipe/dist/photoswipe.css" /> <link rel="stylesheet" href="https://unpkg.com/photoswipe/dist/default-skin/default-skin.css" /> <script src="https://unpkg.com/photoswipe/dist/photoswipe.min.js"></script> <script src="https://unpkg.com/photoswipe/dist/photoswipe-ui-default.min.js"></script> ``` 2. 在HTML中添加图片,并为它们设置一个共同的类名。 ```html <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="image1.jpg" class="my-gallery"></div> <div class="swiper-slide"><img src="image2.jpg" class="my-gallery"></div> <div class="swiper-slide"><img src="image3.jpg" class="my-gallery"></div> </div> <div class="swiper-pagination"></div> </div> ``` 3. 初始化Swiper插件,并添加点击事件。 ```javascript var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, // 其他参数 }); var gallery = new PhotoSwipe(document.querySelectorAll('.my-gallery'), PhotoSwipeUI_Default, [], { index: 0, history: false, tapToClose: true, shareEl: false, fullscreenEl: false }); gallery.init(); // 点击事件 document.querySelectorAll('.my-gallery').forEach(function(item) { item.addEventListener('click', function() { var index = Array.prototype.indexOf.call(document.querySelectorAll('.my-gallery'), item); gallery.goTo(index); }); }); ``` 其中,`document.querySelectorAll('.my-gallery')`选择所有拥有`my-gallery`类名的元素,然后为它们添加点击事件。点击事件中,用`indexOf`方法获取当前图片在所有图片中的索引,然后调用`gallery.goTo(index)`方法打开PhotoSwipe插件并显示对应的图片。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值