如何使用swiper写一个场景式app

最新推荐文章于 2024-04-13 05:44:17 发布

wodemaya8

最新推荐文章于 2024-04-13 05:44:17 发布

阅读量2.3k

点赞数

分类专栏： html 文章标签：幻灯片 swiper

本文链接：https://blog.csdn.net/wodemaya8/article/details/45247417

版权

swiper是一个js插件,主要实现幻灯片播放的效果,使用swiper可以轻松搭建一个场景式app.

这里写图片描述

大家可以使用手机打开如下链接查看最终效果:
http://www.tang520.com/wap_download1.html

首先需要前往swiper官网下载js和css文件:
http://www.swiper.com.cn/

引入头文件

<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>

因为场景式app只运行在微信上,我们不考虑ie浏览器,所以直接使用jquery2.1.1版本.

所有的swiper代码都张差不多,如下所示:

<div class="swiper-container">  
    <div class="swiper-wrapper">
            <div class="swiper-slide">
                ....场景1
            </div>
            <div class="swiper-slide">
                ....场景2                 
            </div>
            <div class="swiper-slide">
                ....场景3             
            </div>
    </div>
</div>

在其中….部分写入任意的html代码

使用如下代码初始化swiper:

var mySwiper = new Swiper('.swiper-container', 
                        {
                                mode: 'vertical',
                                resistance:'100%'
                        });

其中mode指定了滑动方向,当前是垂直滑动.resistance指是否边缘拉伸效果,具体大家可以测试下.

有了这两个swiper就可以正常运行了.
下面贴出这个场景式app的所有代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <meta name="viewport" content="width=240,user-scalable=no,initial-scale=1,target-densitydpi=medium-dpi" />
        <meta charset="utf-8">
        <title>糖库精品商城</title>
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/idangerous.swiper.min.js"></script>
        <script type="text/javascript" src="js/transformjs.1.0.beta.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.imgpreload.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css">
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <style>
            body {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0px;
            }
            .swiper-container {
                width: 100%;
                height: 100%;
                color: #ff