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

  • 相关阅读:
    杭电 1548 A strange lift(广搜)
    JAVA数组的定义及用法
    WPF之Binding深入探讨
    FBReaderJ源代码编译配置
    【剑指offer】合并两有序单链表
    对HGE游戏引擎的一次封装
    WAV文件格式分析
    Ubuntu9.04更新源
    内核及内核模块
    java实现第七届蓝桥杯愤怒小鸟
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11853254.html
Copyright © 2011-2022 走看看