Swiper中文论坛

标题: swiper轮播和setInterval发生混乱 [打印本页]

作者: 小小白前来探路 时间: 2021-7-19 18:31
标题: swiper轮播和setInterval发生混乱
如图：这块id="rycr"的代码是我用js方法拼接进去的，所以new swiper()就放在了js方法里面，但是这块div是要定时刷新的，所以就给了定时器刷新，但是div没5秒刷新后轮播图的播放就会出现问题，问题大概情况：轮播图5秒后从头开始轮播，但是轮播时也会轮播定时器执行前的那个轮播位置，导致轮播过程穿插。求解答

window.setInterval(gdt,1000*5);function gdt() {
$.ajax({
      url:"/other/gdPersonnelAccess",
      type:"POST",
      success:function (result) {
         if(result.success){
            var rycrs = result.data.personnel;//人员出入
            var mgjjs = result.data.dutyManage;//门岗交接
            var rucrContent = "";//人员出入
            var mgjjsContent = "";//门岗交接
            $.each(rycrs,function (i, rycr) {
                  rucrContent += '<div class="swiper-slide">';
                  rucrContent += '<div class="top_ma">';
                  rucrContent += '<b>'+rycr.name+'</b></div>';
                  rucrContent += '<img width="90%" src="'+rycr.picUrl+'" /></div>';
            });
            $("#rycr").html(rucrContent);
            var mySwiper = new Swiper('.swiper-container', {
                  loop: true,
                  autoplay: 2000,
                  slidesPerView: 2,
                  preloadImages:false,
                  observer:true,
                  observeParents:true,
                  observeSlideChildren:true,
            })
            console.log(rucrContent);
            $.each(mgjjs,function (i, mgjj) {
                  mgjjsContent += '<div class="swiper-slide">';
                  mgjjsContent += '<div class="top_ma">';
                  mgjjsContent += '<b>'+mgjj.dutyUser+'</b></div>';
                  mgjjsContent += '<img width="90%" src="'+mgjj.picUrl+'" /></div>';
            });
            $("#mgjj").html(mgjjsContent);
            var mySwiper = new Swiper('.swiper-height', {
                  loop: true,
                  autoplay: 2000,
                  slidesPerView: 2,
                  preloadImages:false,
                  observer:true,
                  observeParents:true,
                  observeSlideChildren:true,
            })

         } else {
            layer.msg("滚动图查询失败",{time: 2000, icon: 5, shift: 6},function(){

            });
         }
      },
      error:function () {
         layer.msg("滚动图请求失败",{time: 2000, icon: 5, shift: 6},function(){

         });
      }
});
}

作者: 小小白前来探路 时间: 2021-7-19 18:47
就是轮播切换不正常，是因为swiper和setinterval的原因吗，该如何解决

作者: supereric 时间: 2021-7-21 22:37
你都重复初始化了 setInterval 里面会一直重复初始化swiper实例都会出错的吧

作者: 小小白前来探路 时间: 2021-7-22 11:36

supereric 发表于 2021-7-21 22:37
你都重复初始化了 setInterval 里面会一直重复初始化swiper实例都会出错的吧

...

老哥，那该怎么弄，初始化拿出来后，就会导致第一页的图片每次一闪而过。有没有好的办法解决，或者其他更好的方法去多次动态获取后台数据

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)