<th id="jonck"><track id="jonck"></track></th>
<progress id="jonck"></progress>
    1. <progress id="jonck"></progress>

    2. <button id="jonck"><acronym id="jonck"></acronym></button>

    3. 小程序APP網(wǎng)站定制開(kāi)發(fā)專(zhuān)家

      [科技]手機觸屏滑動(dòng)圖片切換插件swiper.js

        今天給大家分享一款手機觸屏滑動(dòng)圖片切換插件swiper.js是一款swiper手機觸屏滑動(dòng)圖片幻燈片,適合各種尺寸。效果圖如下:

        實(shí)現的代碼。

        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';
      
      			//}
      
      		}
      
      
      
      	}
      
      
      
      });

      上一篇: [科技]手風(fēng)琴式焦點(diǎn)圖jQuery特效

      下一篇: 【php筆記】php整型就是整數

      在線(xiàn)客服
      在線(xiàn)客服關(guān)閉
      品智官方微信

      掃碼關(guān)注官方微信

      影音先锋在线资源资源网_日韩亚洲国产综合ΑV高清_成年女人免费视频播放大全_久久精品国产久精国产爱