今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片，适合各种尺寸。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div style="max-width: 640px; margin: 0 auto;"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src='/images/loading.gif' data-original="images/zhiling1.jpg"></div> <div class="swiper-slide"> <img src='/images/loading.gif' data-original="images/zhiling2.jpg"></div> <div class="swiper-slide"> <img src='/images/loading.gif' data-original="images/zhiling3.jpg"></div> <div class="swiper-slide"> <img src='/images/loading.gif' data-original="images/zhiling4.jpg"></div> <div class="swiper-slide"> <img src='/images/loading.gif' data-original="images/zhiling5.jpg"></div> <div class="swiper-slide"> <img src='/images/loading.gif' data-original="images/zhiling6.jpg"></div> <div class="swiper-slide"> <img src='/images/loading.gif' data-original="images/zhiling7.jpg"></div> </div> </div> </div>
js代码：
function fixPagesHeight() { $('.swiper-slide,.swiper-container').css({ height: $(window).height(), })}$(window).on('resize', function() { fixPagesHeight();})fixPagesHeight();var mySwiper = new Swiper('.swiper-container', { direction: 'vertical', mousewheelControl: true, watchSlidesProgress: true, onInit: function(swiper) { swiper.myactive = 0; }, onProgress: function(swiper) { for (var i = 0; i < swiper.slides.length; i++) { var slide = swiper.slides[i]; var progress = slide.progress; var translate, boxShadow; translate = progress * swiper.height * 0.8; scale = 1 - Math.min(Math.abs(progress * 0.2), 1); boxShadowOpacity = 0; slide.style.boxShadow = '0px 0px 10px rgba(0,0,0,' + boxShadowOpacity + ')'; if (i == swiper.myactive) { es = slide.style; es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')'; es.zIndex=0; }else{ es = slide.style; es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform =''; es.zIndex=1; } } }, onTransitionEnd: function(swiper, speed) { for (var i = 0; i < swiper.slides.length; i++) { // es = swiper.slides[i].style; // es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = ''; // swiper.slides[i].style.zIndex = Math.abs(swiper.slides[i].progress); } swiper.myactive = swiper.activeIndex; }, onSetTransition: function(swiper, speed) { for (var i = 0; i < swiper.slides.length; i++) { //if (i == swiper.myactive) { es = swiper.slides[i].style; es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms'; //} } }});via：http://www.w2bc.com/Article/33095
原标题：手机触屏滑动图片切换插件swiper.js
关键词：JS
我知道了 