TA的每日心情 | 奋斗
2016-10-20 11:06 |
|---|
签到天数: 1 天 [LV.1]初来乍到
注册会员
- 积分
- 184
|
板凳
楼主 |
发表于 2016-10-17 14:12:05
|
只看该作者
我的垂直方向的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-14 16:11:17
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
淘帖
