你的位置:首页 > Java教程

[Java教程]手机触屏滑动图片切换插件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://www.w2bc.com/Article/33095