swiper滑动及动画特效

小咪咪 2022-05-16 02:35 488阅读 0赞

**Swiper基本使用方法：**

一、加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

二、HTML内容。（我是基于angular1.x）

<div class="swiper-container jb_carousel" id="jb_carousel">
        <div class="swiper-wrapper" >
            <div class="swiper-slide" ng-repeat="img in carousel track by $index">
                <button ng-click="homeInfo.CarouselLink(img)">阅读详情</button>
                <a href=""
                   class="car"
                   ng-click="homeInfo.CarouselLink(img)">
                    <img ng-src="{
       {img.imgPc}}" alt="{
       {img.title}}">
                </a>
    
                <div
                    class="jb_carousel_text"
                    id="jb_carousel_text" ng-cloak="">
                    <p class="ani title"
                       swiper-animate-effect="bounceInRight"
                       swiper-animate-duration="1s"
                       swiper-animate-delay="0s">
                        {
       {img.configXml.title}}
                    </p>
                    <div
                        swiper-animate-effect="fadeInUp"
                        swiper-animate-duration="2s"
                        swiper-animate-delay=".2s"
                        class="ani title jb_carousel_content">
                        {
       {img.configXml.content}}
                    </div>
                </div>
            </div>
        </div>
    </div>

三、初始化Swiper

**Swiper Animate使用方法**

1. 使用Swiper Animate需要先加载[swiper.animate.min.js][]和[animate.min.css][]。

2. 初始化时隐藏元素并在需要的时刻开始动画。

3. 在需要运动的元素上面增加类名**  ani   **，和其他的类似插件相同，Swiper Animate需要指定几个参数：

**CSS3自定义动画**

@keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
    }
    
    @-webkit-keyframes myfirst /* Safari 和 Chrome */
    {
        from {background: red;}
        to {background: yellow;}
    }
    
    div
    {
        animation: myfirst 5s linear 2s infinite alternate;
        /* Safari 和 Chrome: */
        -webkit-animation: myfirst 5s linear 2s infinite alternate;
    }

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[swiper.animate.min.js]: http://www.swiper.com.cn/download/index.html#file8
[animate.min.css]: http://www.swiper.com.cn/download/index.html#file9
[20191229112121499.png]: /images/20220516/db1fb1888a12436fbe8f627aa76bf88b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220516/54ddf5d6670b4b939cb4f4481cfde070.png