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

最新推荐文章于 2024-02-06 16:54:58 发布

VIP文章奥特曼打小怪兽_

最新推荐文章于 2024-02-06 16:54:58 发布

阅读量1w

点赞数

分类专栏： css+swiper 文章标签：动画手机框架 css3

本文链接：https://blog.csdn.net/ChenYH0/article/details/54984405

版权

当你遇到这样一个项目，要求如下：
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 -->
    <

最低0.47元/天解锁文章

奥特曼打小怪兽_

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
手机端触摸滑动（H5+CSS3+JS+Swiper）

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

扫一扫