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

        swiper手機觸屏滑動圖片疊加輪播切換代碼

        來源:http://www.zmam.tw/js/3739.html 素材火管理員 2018-06-10 11:35瀏覽(1460) 收藏

        swiper手機觸屏滑動圖片疊加輪播切換代碼,3D立體焦點圖左右輪播效果,帶文字標題,電腦手機端都適用。
        swiper手機觸屏滑動圖片疊加輪播切換代碼
        分類:圖片代碼 > 圖片輪播 難易:初級

        程序員,你不是一個人;網站開發QQ群:698377651,在線充值,或聯系QQ3401083589直接充值

        查看演示 下載資源: 58

        手機掃碼訪問:

        下載資源 下載積分: 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
        江西11选五开奖记录