Swiper插件的基本使用方法和案例

妖狐艹你老母 2022-10-19 04:10 507阅读 0赞

# Swiper插件的基本使用方法和案例 #

# 一、Swiper是什么？ #

*  Swiper常用于移动端网站的内容触摸滑动
 *  Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
 *  Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
 *  Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]

# 二、Swiper使用的步骤 #

## 步骤一、[点我进入Swiper官网，下载Swiper animate 动画js和Swiper animate 动画CSS][Swiper_Swiper animate _js_Swiper animate _CSS] ##

## 如果安装了Nodejs环境也可以打开编译器终端利用`npm install swiper`下载 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]

# 步骤二：引入文件 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20210709101458888.png]  
![在这里插入图片描述][20210709101615992.png]

## 步骤三：HTML和JS的基本内容 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 5]

# 步骤四：Swiper动画的初始化，以及animate的初始化 #

# 步骤五、在需要运动的元素上面增加类名ani ，和其他的类似插件相同 #

![在这里插入图片描述][20210709103151403.png]

**Swiper Animate需要指定几个参数**

*  swiper-animate-effect：切换效果，例如 fadeInUp
 *  swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
 *  swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

## 切换效果参考 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 7]

## 三、Swiper制作元宵节动画 ##

![在这里插入图片描述][20210709103608720.gif_pic_center]

**代码如下**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="css/swiper.min.css">
        <link rel="stylesheet" href="css/animate.min.css">
        <style>
            html,
            body { 
                height: 100%;
            }
            
            html { 
                font-size: 15.625vw;
            }
            
            body { 
                max-width: 640px;
                margin: 0 auto;
                font-size: 14px;
            }
            
            .swiper-container { 
                height: 100%;
            }
            
            .swiper-container,
            .swiper-slide { 
                background: url(images/bg.jpg) no-repeat;
                position: relative;
            }
            
            .flower { 
                position: absolute;
                width: 3.6rem;
                height: 4.4rem;
                left: 0;
                top: 0;
            }
            
            .bg { 
                position: absolute;
                width: 100%;
                height: 4rem;
                top: 50%;
                left: 0;
                margin-top: -2rem;
            }
            
            .s1 { 
                position: absolute;
                width: 1.27rem;
                height: 2.5rem;
                right: 0.6rem;
                top: 50%;
                margin-top: -1.25rem;
            }
            
            .s2 { 
                position: absolute;
                width: 2rem;
                height: 2.4rem;
                left: 0.6rem;
                top: 50%;
                margin-top: -1.2rem;
            }
        </style>
    </head>
    
    <body>
        
        <div class="swiper-container ">
            <div class="swiper-wrapper">
                
                <div class="swiper-slide">
                    <img src="images/flower.png" class="flower ani " swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" alt="">
                    <img src="images/s1.png" alt="" class="bg ani " swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
    
                    <img src="images/s1-t1.png" class="s1 ani " swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" alt="">
                    <img src="images/s1-t2.png" class="s2 ani " swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" alt="">
                </div>
                
                <div class="swiper-slide">Slide 2</div>
    
                
                <div class="swiper-slide">Slide 3</div>
            </div>
            
            <div class="swiper-pagination"></div>
            <script src="js/swiper.min.js"></script>
            <script src="js/swiper.animate1.0.3.min.js"></script>
            <script>
                window.onload = function() { 
                    var mySwiper = new Swiper('.swiper-container', { 
                        direction: 'vertical', // 垂直切换选项
                        loop: true, // 循环模式选项
    
                        // 如果需要分页器
                        pagination: { 
                            el: '.swiper-pagination',
                        },
    
                        on: {  //动画的初始化
                            init: function() { 
                                swiperAnimateCache(this); //隐藏动画元素 
                                swiperAnimate(this); //初始化完成开始动画
                            },
                            slideChangeTransitionEnd: function() { 
                                swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                                this.slides.eq(this.activeIndex).find('.ani').removeClass('ani');
                                // 动画只展现一次， 去除ani类名
                            }
                        }
                    })
                }
            </script>
    
    </body>
    
    </html>

# 四、基于swiper制作轮播图 #

**轮播图这块，除了ui框架的轮播组件外，用的最多的就swiper了吧！毕竟ui框架中，轮播组件的定制化功能还是比较欠缺的，毕竟不是专业做轮播的。swiper制作轮播图，他是包含背景，并且每一个轮播的图片在动的时候，与背景之间还存在一定的视觉差，这样使轮播图看起来更有层次感和流动感。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 8]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="css/swiper.min.css">
        <style>
            .swiper-bg { 
                background: url(images/bc1.jpg) no-repeat 100%;
                height: 500px;
            }
            
            .swiper-wrapper { 
                position: absolute;
                top: 0;
            }
            
            .swiper-slide { 
                display: flex;
                justify-content: center;
            }
        </style>
        <script src="js/swiper.min.js"></script>
    </head>
    
    <body>
        <div class="swiper-container">
            <div class="swiper-bg" data-swiper-parallax="-5%" data-swiper-parallax-duration="1000"></div>
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/bc1.jpg" /></div>
                <div class="swiper-slide"><img src="images/bc1.jpg" /></div>
                <div class="swiper-slide"><img src="images/bc1.jpg" /></div>
            </div>
            <div class="swiper-button-prev"></div>
            
            <div class="swiper-button-next"></div>
            
            <div class="swiper-pagination"></div>
            
        </div>
        <script>
            var mySwiper = new Swiper('.swiper-container', { 
                speed: 300,
                navigation: { 
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                pagination: { 
                    el: '.swiper-pagination',
                },
                loop: true,
                autoplay: true,
                clickable: true,
            })
            mySwiper.params.pagination.clickable = true;
            //此外还需要重新初始化pagination
            mySwiper.pagination.destroy()
            mySwiper.pagination.init()
            mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');
        </script>
        <script>
        </script>
    </body>
    
    </html>

# 五、网格分布 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 9]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][20210709104223173.png]

![在这里插入图片描述][20210709104154314.png]

# 五、易企秀制作Swiper动画 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 12]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 13]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70]: /images/20221005/2abaa61a11ce4c6fb64be85aab7c3485.png
[Swiper_Swiper animate _js_Swiper animate _CSS]: https://www.swiper.com.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 1]: /images/20221005/2d494455ca6f4256a12b8c9603f95ae7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 2]: /images/20221005/0a71d65e0c1b49af82ec733525e98590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 3]: /images/20221005/e6fe71a3c6f1488eac780359a1e7e48e.png
[20210709101458888.png]: /images/20221005/5599a8fcbf6f45f0bc0eb79aa596d23d.png
[20210709101615992.png]: /images/20221005/9dfdf78259e84adebfb9f08535686419.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 4]: /images/20221005/5a7dc6d5d85a41778208e6e6c8b5fb3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 5]: /images/20221005/54543fb38c854133a2c1efb7faa999e2.png
[20210709103151403.png]: /images/20221005/d94c6bd7c98d40099086b51d57e5e8a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 6]: /images/20221005/39ba663439e8487f816287bdd6ee561d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 7]: /images/20221005/0ac710bfd0604718a576bd9822b05bde.png
[20210709103608720.gif_pic_center]: /images/20221005/3738b08b360344aa93192d2da55ecbf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 8]: /images/20221005/3d7244f8d33441708bbee5c6dfb39c59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 9]: /images/20221005/6ec915c33b2d4c4cb8bba43c4358e01d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 10]: /images/20221005/af19e11f05ce4e14b0141547d7ac06e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 11]: /images/20221005/8c9483dd562d46b789868b5d8ee6383c.png
[20210709104223173.png]: /images/20221005/0da251056b9c458784bd251341db8df9.png
[20210709104154314.png]: /images/20221005/d4629a348d654b328cdeea661c2804b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 12]: /images/20221005/ed976a83ba244f61be39964fc8a38d3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Mzc0OTY5_size_16_color_FFFFFF_t_70 13]: /images/20221005/c272cbf494e649bca6170a35303477c9.png