今天给大家分享一款手机触屏滑动图片切换插件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://www.w2bc.com/Article/33095

在线预览    源码下载