swiper动画在loop模式下第一页失效
swiper动画在loop：true 时，在UC上测试正常显示，在QQ浏览器上面测试，第一页动画失效，根本没有动画，虽然官网上说动画不适合loop模式，但是我的页面需要做成循环，该怎么解决啊？ 我做过几次loop：true ， 都没你说的情况 ，最好贴代码看下。 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
请问解决了吗~遇到一样的问题
我用官网的动画API解决不了，我就用了网友发布的动画控制器写，目前来说没发现问题
http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=626&extra=page%3D1 lyflyf 发表于 2016-10-19 16:14
我用官网的动画API解决不了，我就用了网友发布的动画控制器写，目前来说没发现问题
http://bbs.swiper.co ...
我后面找了一个解决的办法，在加载之前先隐藏首页的内容，加载的时候再放出来 三十五码半 发表于 2016-10-19 16:57
我后面找了一个解决的办法，在加载之前先隐藏首页的内容，加载的时候再放出来 ...
我遇到的问题是，开始刚加载完成时候，第一页就没有动画了，后面不管怎样，切换到第一页都是没有动画的，我尝试过就是加载动画那里添加个动画开启时间，但是解决的问题也只是整个页面开始加载完成后有动画，以后切换回去到第一页也是没有动画，不知道你的那个方法行不行，我也没试过你那个方法，但我认为我加个动画开启时间这个方法和你那个方法是类似的，有空的话我尝试下你的方法，你方便把你的方法发给我参考下吗 lyflyf 发表于 2016-10-19 17:24
我遇到的问题是，开始刚加载完成时候，第一页就没有动画了，后面不管怎样，切换到第一页都是没有动画的， ...
我知道你的意思~动画延时或着设置开始的时间是没有效果的，主要是在QQ浏览器和微信上会有这个问题，一开始是以为加载的问题，后面发现不是，然后就想了比较奇葩的办法去解决~直接贴代码吗？ 三十五码半 发表于 2016-10-20 09:16
我知道你的意思~动画延时或着设置开始的时间是没有效果的，主要是在QQ浏览器和微信上会有这个问题，一开 ...
把你解决这个问题的方法那一段代码贴出来看看，现在我用动画控制器，发现设置不了swiper的切换效果，设置了就会乱套 有办法了吗
页:
[1]
2