[科技]手機觸屏滑動圖片切換插件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';
//}
}
}
});