swiper动态改变滑动内容的实现方法
更新时间:2018年01月17日 11:39:39 作者:zhyue93
假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法,感兴趣的朋友一起看看吧
假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1
body下面添加如下代码
<div class="swiper-container temp"> <div class="swiper-wrapper"> <div class="swiper-slide"> 1 </div> <div class="swiper-slide"> 2 </div> <div class="swiper-slide"> 3 </div> </div> </div>
引用swiper的css和js脚本(当前使用的是4.x以上版本)
添加js脚本
var now_ActiveIndex=2;//,//当前所在下标
var tempSwiper = new Swiper('.swiper-container.temp', {
initialSlide: 1,
loop:true,
speed:400,
on: {
slideChange: function(swiper){//当当前Slide切换时执行(activeIndex发生改变)
var pre_number=Number($(this.slides[now_ActiveIndex]).text());
if(now_ActiveIndex>this.activeIndex){
if(now_ActiveIndex==4&&this.activeIndex==1){
$(this.slides[this.activeIndex]).text(pre_number);
}else{//上一个
var act_number=pre_number-1;
$(this.slides[this.activeIndex]).text(act_number);
}
}else if(now_ActiveIndex<this.activeIndex){
if(now_ActiveIndex==0&&this.activeIndex==3){
$(this.slides[this.activeIndex]).text(pre_number);
}else{//下一个
var act_number=pre_number+1;
$(this.slides[this.activeIndex]).text(act_number);
}
}
now_ActiveIndex=this.activeIndex;
},
},
})
初始值:

往左滑动三次:

往右滑动一次

做这个测试主要为了后面日历的左右滑动改变上一月下一月
总结
以上所述是小编给大家介绍的swiper动态改变滑动内容的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
推荐一个封装好的getElementsByClassName方法
这篇文章主要推荐一个封装好的getElementsByClassName方法,需要的朋友可以参考下2014-12-12
JavaScript跨域调用基于JSON的RESTful API
这篇文章主要介绍了JavaScript跨域调用基于JSON的RESTful API的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-07-07
兼容最新firefox、chrome和IE的javascript图片预览实现代码
这篇文章主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下2014-08-08


最新评论