swiper滑到最后一页交互

  类似淘宝效果,图片展示完,再滑动就是到图文详情(另外一个崭新的页面)。

var client=$(document.body)[0].clientWidth;
var swiper = new Swiper('.swiper-container', {

    pagination: '.swiper-pagination',
    paginationClickable: true,
    onTouchEnd: function(swiper){
        dis=client*($('.swiper-slide').length-1)+70
        TR=swiper.translate
        if(TR<-dis){
        swiper.setWrapperTranslate(TR);
        alert(“准备切换”);
     };
   }
});
思路:1、监听滑动结束之后的事件;2、获取页面宽度;3、算出页面一共走了多少;4、获取wrapper的位移。5、设置手动滑动的距离


html:
<div class="swiper-container">
     <div class="swiper-wrapper"> 
         <div class="swiper-slide">
             <img src="" alt="" />
             <p style=""><p class="shengluo"  style="">查看更多文章查看更多.文章查看更多文章查看文章查看更多文章查看</p></p>
          </div>
         <div class="swiper-slide" style="position:relative;">
             <img src="" alt="" />
              <p  style=""><p class="shengluo"  style="">查看更多文章查看更多.文章查看更多文章查看文章查看更多文章查看</p></p>
          </div>
          <div class="swiper-slide" style="position:relative;">
               <img src="" alt="" />
               <p style=""><p class="shengluo"  style="">查看更多文章查看更多.文章查看更多文章查看文章查看更多文章查看</p></p>
          </div>
           <span style="padding-left:20px;padding-top:30px;">查看更多文章</span>
      </div>              
    <div class="swiper-pagination"></div>
</div>




  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值