Swiper中文论坛

标题: swiper动画在loop模式下第一页失效 [打印本页]

作者: lyflyf 时间: 2016-10-14 16:11
标题: swiper动画在loop模式下第一页失效
swiper动画在loop：true 时，在UC上测试正常显示，在QQ浏览器上面测试，第一页动画失效，根本没有动画，虽然官网上说动画不适合loop模式，但是我的页面需要做成循环，该怎么解决啊？

作者: Swpery 时间: 2016-10-14 17:49
我做过几次loop：true ，都没你说的情况，最好贴代码看下。

作者: lyflyf 时间: 2016-10-17 14:12

Swpery 发表于 2016-10-14 17:49
我做过几次loop：true ，都没你说的情况，最好贴代码看下。

我的垂直方向的swiper初始化是这样的：
var SwiperV= new Swiper('.swiper-container-v', {
      //设置滑动方向为垂直
      direction: 'vertical',
      loop:true,
pagination: '.swiper-pagination-v',
      spaceBetween: 50,
      onInit: function(SwiperV){
   swiperAnimateCache(SwiperV); //隐藏动画元素
   swiperAnimate(SwiperV);    //初始化完成开始动画
},
      onSlideChangeEnd: function(SwiperV){
swiperAnimate(SwiperV);    //每个slide切换结束时也运行当前slide动画
//控制音乐
if(SwiperV.activeIndex==3){
$(".musicPlayimg > img").attr("src","musicplay/musicOff.png");
$(".musicPlayimg").show();
audioElement.load();
}else{
$(".musicPlayimg").hide();
audioElement.pause();
}
   }
});
嵌套层水平方向的swiper初始化是这样的：
var SwiperH= new Swiper('.swiper-container-h', {
      //设置滑动方向为水平
      //direction:'horizontal',
//切换效果
// effect:'fade',
// loop:true,
pagination: '.swiper-pagination-h',
      spaceBetween: 50,
      onInit: function(SwiperH){

      },
      onSlideChangeEnd: function(SwiperH){
        $(".musicPlayimg").show();    //音乐图标
        swiperAnimate(SwiperH);
      },
      onTouchEnd: function (SwiperH){
         swiperAnimate(SwiperH);
      },
      //手指触碰Swiper并且没有按照direction设定的方向移动时执行。实现每次都是跳转到产品首页
      onTouchMoveOpposite: function (SwiperH){
      SwiperH.slideTo(0,2000,false);
      }
});
没有动画的那一页是首页，代码是这样写的：
<section class="swiper-slide">
        <img id="logo" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.1s" src="images/logo.png" alt="LOGO"/>
         <img id="title" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.3s" src="images/1-2.jpg" alt="系统标题"/>
         <img id="computer1" class="ani" swiper-animate-effect="fadeInRightBig" swiper-animate-duration="1s" swiper-animate-delay="0.3s" src="images/computer1.jpg" alt="页面图片-电脑">
      </section>
我也不知道为什么在其它手机浏览器测试是正常的，但是在QQ浏览器上面第一页就没有动画，其它页的动画是正常的

作者: 三十五码半 时间: 2016-10-19 11:43
请问解决了吗~遇到一样的问题

作者: lyflyf 时间: 2016-10-19 16:14

三十五码半发表于 2016-10-19 11:43
请问解决了吗~遇到一样的问题

我用官网的动画API解决不了，我就用了网友发布的动画控制器写，目前来说没发现问题
http://bbs.swiper.com.cn/forum.p ... &extra=page%3D1

作者: 三十五码半 时间: 2016-10-19 16:57

lyflyf 发表于 2016-10-19 16:14
我用官网的动画API解决不了，我就用了网友发布的动画控制器写，目前来说没发现问题
http://bbs.swiper.co ...

我后面找了一个解决的办法，在加载之前先隐藏首页的内容，加载的时候再放出来

作者: lyflyf 时间: 2016-10-19 17:24

三十五码半发表于 2016-10-19 16:57
我后面找了一个解决的办法，在加载之前先隐藏首页的内容，加载的时候再放出来 ...

我遇到的问题是，开始刚加载完成时候，第一页就没有动画了，后面不管怎样，切换到第一页都是没有动画的，我尝试过就是加载动画那里添加个动画开启时间，但是解决的问题也只是整个页面开始加载完成后有动画，以后切换回去到第一页也是没有动画，不知道你的那个方法行不行，我也没试过你那个方法，但我认为我加个动画开启时间这个方法和你那个方法是类似的，有空的话我尝试下你的方法，你方便把你的方法发给我参考下吗

作者: 三十五码半 时间: 2016-10-20 09:16

lyflyf 发表于 2016-10-19 17:24
我遇到的问题是，开始刚加载完成时候，第一页就没有动画了，后面不管怎样，切换到第一页都是没有动画的， ...

我知道你的意思~动画延时或着设置开始的时间是没有效果的，主要是在QQ浏览器和微信上会有这个问题，一开始是以为加载的问题，后面发现不是，然后就想了比较奇葩的办法去解决~直接贴代码吗？

作者: lyflyf 时间: 2016-10-20 11:05

三十五码半发表于 2016-10-20 09:16
我知道你的意思~动画延时或着设置开始的时间是没有效果的，主要是在QQ浏览器和微信上会有这个问题，一开 ...

把你解决这个问题的方法那一段代码贴出来看看，现在我用动画控制器，发现设置不了swiper的切换效果，设置了就会乱套

作者: 发给 时间: 2017-1-11 15:03
有办法了吗

作者: CatYang 时间: 2018-10-15 15:59
试一下将img改成div用background-image 我解决了，你试试

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