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