微场景 swiper 监测当前页数进而做其他动作

本文介绍如何使用Swiper库实现垂直方向的轮播效果,并通过回调函数控制动画元素的显示与隐藏。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


var lihong = document.getElementById('interact');

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    watchSlidesProgress : true,
    direction: 'vertical',
    onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
      swiperAnimateCache(swiper); //隐藏动画元素 
      swiperAnimate(swiper); //初始化完成开始动画
    }, 
    onSlideChangeEnd: function(swiper){ 
   
      swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
      if (swiper.realIndex>0) {
      alert(swiper.activeIndex)
      lihong.setAttribute('style','display:block');
}else{
lihong.setAttribute('style','display:none');
};
    } 

});



swiper.realIndex 当前是第几页(从0开始),配合onSlideChangeEnd做判断完成一些事情。

*swiper的回调函数onSlideChangeEnd 这个函数可以在slide切换结束时做很多动作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值