swiper滑到最后一页交互

最新推荐文章于 2022-07-08 17:09:29 发布

翻译最新推荐文章于 2022-07-08 17:09:29 发布 · 1.1w 阅读

文章标签：

#H5 #swiper #滑到最后一页切换

H5 同时被 2 个专栏收录

7 篇文章

订阅专栏

移动端

7 篇文章

订阅专栏

本文介绍了一种模仿淘宝网站效果的轮播图切换实现方式，通过Swiper插件结合JavaScript来完成图片展示后的自动滑动切换至图文详情页的功能。主要步骤包括监听滑动结束事件、获取屏幕宽度、计算滑动距离并手动调整滑动位置。

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

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>