jquery swiper3自定義切換效果的方法
<pre>
<div class="swiper-slide">
<div class="wrapslide bg">
<img class="ani bg loadimg" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s" loadimg="{$yuming}/images/3/p3_bg.jpg" />
<img class="ani p3_wz1 loadimg" swiper-animate-effect="suoxiaofadeIn" swiper-animate-duration="1s" swiper-animate-delay="0s" loadimg="{$yuming}/images/3/p3_wz1.png" />
<img class="ani p3_wz2 loadimg" swiper-animate-effect="suoxiaofadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s" loadimg="{$yuming}/images/3/p3_wz2.png" />
</div>
</div>
/*切換時就觸發 用於做出場動畫*/
onSlideChangeStart: function(swiper) {
$('.swiper-slide-prev .wrapslide').addClass('rotate')
},
onTransitionEnd: function(swiper) {
},
onTransitionEnd: function(swiper) {
// $('.wrapslide').removeClass('rotate');
},
</pre>
ps: 因為slide不方便做動畫 所以里面加了個wrapslide 做出場動畫就不沖突了 入場動畫bg上一定要加動畫 適當的時候切換時間用speed控制(一般不用)
還有個方法就是 切換不能淡出的畫 就采取自定義觸摸上滑做效果 speed設置0就可以了 快速切換