1. <dd id="uoqjr"></dd>
        头像

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

        来源:http://www.zmam.tw/js/3739 18***38 2018-06-10 11:35浏览(2156) 收藏

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

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

        查看演示 下载资源: 78

        手机扫码访问:

        下载资源 下载积分: 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 2589223951

        • 头像 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
        江西11选五开奖记录