<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link href="http://cdn.bootcss.com/Swiper/3.4.1/css/swiper.css" rel="stylesheet">

    <!-- Demo styles -->
    <style>
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 300px;
            margin: 20px auto;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
        }
    </style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
    </div>
</div>
<div id="bless">
    <input id="bless-word" type="text">
    <a id="share-button">立即分享</a>
</div>

<!-- Swiper JS -->
<script src="http://cdn.bootcss.com/Swiper/3.4.1/js/swiper.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true
    });
    var shareBtn = document.getElementById("share-button");
    var bless = document.getElementById("bless-word");

    shareBtn.addEventListener("click",function(){
        var blessWord = bless.value;
        var url = "index2.html?word=" + blessWord;
        shareBtn.setAttribute("href",url);
    },false);
</script>
</body>
</html>

swiper的更多相关文章

  1. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  2. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  3. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  4. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  5. swiper框架，实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  6. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  7. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. swiper横向轮播（兼容IE8）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. Swiper说明&&API手册 【中文手册Swiper】

     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...

  10. Swiper 中文API手册（share）

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

随机推荐

  1. Android深度探索HAL与驱动开发 第四章 源代码下载和编译

    前面说过Android移植主要就是Linux内核的移植,而Linux内核移植主要是Linux驱动的移植,所以为了开发和测试Linux驱动,有必要学习在Ubuntu Linux下如何搭建两套开发环境:A ...

  2. 人类大脑只开发了10%? I don't think so.

    既然程序执行时有些部分是彼此互斥的(在程序的一次执行中,执行了这部分就不会去执行另一部分),那么所谓的 人类大脑只开发了10%? 是不是其实只是程序互斥的一种体现. 而往往"智商" ...

  3. Codeforces Round #175 (Div. 2)

    A. Slightly Decreasing Permutations 后\(k\)个倒序放前面,前\(n-k\)个顺序放后面. B. Find Marble 模拟. C. Building Perm ...

  4. UVA213 信息解码

    对于lrj的想法,真是太清晰.自己真的是很难去做到.贴此代码,加以练习,加以感悟. #include<cstdio> #include<cstring> ][<<] ...

  5. CentOS7 安装 net-speeder 提升 VPS 网络性能

    参考:http://blog.csdn.net/u010027419/article/details/46129639 1.安装依赖库 先安装epel源 rpm -Uvh http://dl.fedo ...

  6. VS2010遇到fatal error C1083: 无法打开预编译头文件:“xxx.pch”: No such file or directory

    对C++和VS2010非常不熟悉,但是无奈赶着项目,只能看了点基础就上手,然后就碰到这个问题了. 原因分析: http://bbs.csdn.net/topics/340191697?page=1 编 ...

  7. [课程设计]Scrum 1.3 多鱼点餐系统开发进度

    [课程设计]Scrum 1.3 多鱼点餐系统开发进度   Scrum 1.3 多鱼点餐系统开发进度 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追 ...

  8. windows2003 DHCP中批处理绑定IP与MAC

    最近正在实施Windows Server 2008 R2 DHCP服务器部署,要求把员工的IP地址和MAC以及姓名完成在DHCP服务器上的绑定,使用的系统是windows2003-x64,要添加的用户 ...

  9. 手写json

    json的意思是JavaScript 对象表示法 '{"0":0,"b":[3,4,5],"c":"0","d ...

  10. System.Data.OleDb操作access数据库类，【bubuko.com】

    access数据库在应用了System.Data.OleDb后操作会很方便,这是一个常用的数据库操作类,其中两个方法,一个是返回datatable的,一个是执行sql语句返回影响记录的(一般是inse ...