手机端触摸滑动（H5+CSS3+JS+Swiper）

最新推荐文章于 2021-01-29 10:22:11 发布

原创

最新推荐文章于 2021-01-29 10:22:11 发布 · 1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #手机 #框架 #css3

本文介绍了如何使用Swiper框架在手机端实现触摸滑动、点击滑动以及在滑动过程中执行动画。通过设置swiper参数、监听滑动事件以及利用CSS3和JavaScript控制动画，确保动画在每屏切换时重新执行。同时，文章提到了在汉堡菜单中应用Swiper的注意事项，提供了详细的实现思路和项目实践链接。

当你遇到这样一个项目，要求如下：
1. 手机端实现触摸滑动
2. 实现点击滑动
3. 在来回切换每一屏的时候 动画能够重新执行
4. 在汉堡菜单里点击某一项，实现滑动到相应的屏。（菜单页左右切换）
要实现这样一个项目，必须首先找到一个合适的框架或者称为插件，来实现手机端能够触摸滑动。这里，我主要介绍swiper。

了解swiper

1.找到demo，并引入需要的js和css

<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide firstPage">Slide 1</div>
            <div class="swiper-slide secondPage">Slide 2</div>
            <div class="swiper-slide thirdPage">Slide 3</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
    <sc