站内搜索:
首页 >> 前端 >> 内容
利用swiper插件做点击相应slide块居中的代码实例

时间:2017/11/3 10:09:19

利用swiper插件做点击相应slide块居中的代码实例
css:
.swiper-container .swiper-wrapper{
transition: all 1s;
}


----------


js:
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    slidesPerView : 3
  });
  var windowWidth = $(window).width();//屏幕的宽度
  var pWidth = 0;//每个p宽度
  var resPlaceX = 0;//最终的位置X
  var moveDistance = 0;//移动的距离
  var startTranform = 0;//当前的transform值
  var startTranformStr = ''//transform字符串
  $('.swiper-slide').on('click',function(e){
  var ev = e || event;
  var disX = ev.clientX  - ev.offsetX;//当前p距离屏幕左边距离
  pWidth = $(this).width();
  resPlaceX = (windowWidth - pWidth) / 2;
  moveDistance = disX - resPlaceX; 
  startTranformStr = $('.swiper-wrapper').get(0).style.transform;
  startTranform = startTranformStr.slice(startTranformStr.indexOf('(') + 1,
  startTranformStr.indexOf('px'));
  if (startTranform == '') {startTranform = 0};
  $('.swiper-slide').removeClass('font-red');
  $(this).addClass('font-red');
  $('.swiper-wrapper').css({
  'transform' : 'translate3d('+ (parseInt(startTranform) + -moveDistance) +'px,0,0)',
  'transition-duration' : '1s'
  });
  });       
</script>

  • 上一篇:使用js操作css动画、使用CSS创建动画的写法
  • 下一篇:Iconfont矢量图图标的使用教程
  • 返回顶部