头像

swiper手机触屏滑动图片叠加轮播切换代码

来源:http://www.sucaihuo.com/js/3739 素材火管理员 2018-06-10 11:35浏览(1186) 收藏

swiper手机触屏滑动图片叠加轮播切换代码,3D立体焦点图左右轮播效果,带文字标题,电脑手机端都适用。
swiper手机触屏滑动图片叠加轮播切换代码
分类:图片代码 > 图片轮播 难易:初级

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 44

手机扫码访问:

下载资源 下载积分: 20 积分

js代码

<script src="js/swiper.min.js"></script>
<script>
certifySwiper = new Swiper('#certify .swiper-container', {
	watchSlidesProgress: true,
	slidesPerView: 'auto',
	centeredSlides: true,
	loop: true,
	loopedSlides: 5,
	autoplay: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		//clickable :true,
	},
	on: {
		progress: function(progress) {
			for (i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i);
				var slideProgress = this.slides[i].progress;
				modify = 1;
				if (Math.abs(slideProgress) > 1) {
					modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
				}
				translate = slideProgress * modify * 260 + 'px';
				scale = 1 - Math.abs(slideProgress) / 5;
				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);
				}
			}
		},
		setTransition: function(transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}

		}
	}

})
</script>
最新交易
评论6
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3401083589

  • 头像 5楼
    08-28 08:24
    u_***92
    还蛮好用的,用起来还不错
  • 头像 4楼
    06-12 11:09
    bo***ss
    这个的效果 真心可以收看来谢谢
  • 头像 3楼
    06-12 09:24
    心***扬
    炫酷,是我想要的效果,感谢分享……
  • 头像 板凳
    06-11 09:51
    1***秀
    轮播效果还是可以的
  • 头像 椅子
    06-11 09:29
    yz***an
    切换非常顺畅,感觉效果不错
  • 头像 沙发
    06-10 19:41
    木***偶
    挺实用的,兼容性很好呀
1 2