zoukankan      html  css  js  c++  java
  • jquery swiper3自定义切换效果的方法

    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就可以了 快速切换

  • 相关阅读:
    Git Bash关键命令
    一个不需要Log4Net的写日志的简单方法
    未知软件
    Linux
    Linux
    Linux
    Linux
    Linux
    Linux
    Linux
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11853254.html
Copyright © 2011-2022 走看看