手机触屏滑动图片切换插件swiper.js

今天给大家分享一款手机触屏滑动图片切换插件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/zhiling1.jpg"></div><div class="swiper-slide"><img src="images/zhiling2.jpg"></div><div class="swiper-slide"><img src="images/zhiling3.jpg"></div><div class="swiper-slide"><img src="images/zhiling4.jpg"></div><div class="swiper-slide"><img src="images/zhiling5.jpg"></div><div class="swiper-slide"><img src="images/zhiling6.jpg"></div><div class="swiper-slide"><img src="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://***/Article/33095