基于swiper制作的图片层叠自动轮播切换特效,支持点击索引按钮、左右箭头按钮或拖动图片控制图片切换。
js代码
<script src="statics/js/swiper.min.js"></script>
<script type="text/javascript">
certifySwiper = new Swiper('.diepic .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 5,
autoplay: 3000,
prevButton: '.swiper-button-prev',
nextButton: '.swiper-button-next',
pagination: '.swiper-pagination',
paginationClickable: true,
slideToClickedSlide: true,
onProgress: function(swiper, progress) {
for(i = 0; i < swiper.slides.length; i++) {
var slide = swiper.slides.eq(i);
var slideProgress = swiper.slides[i].progress;
modify = 1;
if(Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
translate = slideProgress * modify * 201 + 'px';
scale = 1 - Math.abs(slideProgress) / 3;
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if(Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
onSetTransition: function(swiper, transition) {
for(var i = 0; i < swiper.slides.length; i++) {
var slide = swiper.slides.eq(i)
slide.transition(transition);
}
},
//处理分页器bug
onSlideChangeStart: function(swiper) {
if(swiper.activeIndex == 4) {
swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
console.log(swiper.bullets.length);
}
}
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791