<!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. 初识Linux—1

    1,Ctrl+C作用是终止当前的命令 2,ps显示目前正在执行的程序(命令)(process status) 3,退出是exit,连续按exit,最终会关闭终端 4,Root是管理员,其他的用户都是由 ...

  2. 【引】objective-c,3:关于block

    原文参考博文: http://blog.devtang.com/2013/07/28/a-look-inside-blocks/ http://www.cnblogs.com/kesalin/arch ...

  3. jquery设置下拉菜单

    jQuery代码 1,引用jQuery库 2,show方法 3,hide方法 <script type="text/javascript"> $function(){ ...

  4. [转]linux,windows 可执行文件(ELF、PE)

    ELF (Executable Linkable Format)UNIX类操作系统中普遍采用的目标文件格式 . 首先要知道它有什么作用:工具接口标准委员会TIS已经将ELF作为运行在Intel32位架 ...

  5. while 循环

    while(condition) { //........ } 循环在我们从事C语言开发的过程中可以说用的挺多的,但是今天想起了一个问题,源于我要在一个长字符串中查找特定字符串,于是我写了如下代码: ...

  6. 百度网盘kbengine - warring项目下载地址

    http://pan.baidu.com/s/1k4J4y 下载解压之后,请看<<使用说明.doc>>,有更新指导

  7. android development

    1. Supporting different devices 1) Supporting different screen size 主要有几点,首先是布局文件夹以及布局文件的命名 layout/m ...

  8. asmlib

    http://pandarabbit.blog.163.com/blog/static/209284144201292293642857/ centos6.5桌面2.6.32yum install k ...

  9. Linux系统安装之U盘引导

    折腾了一天,终于把系统安装上去了,心里那个苦啊. 参考:http://blog.csdn.net/avilifans/article/details/13768139 安装步骤如下: 第一步:Ultr ...

  10. BRISK: Binary Robust Invariant Scalable Keypoints

    注意:本文含有一些数学公式,如果chrome不能看见公式的话请用IE打开网站 1.特征点提取   特征点提取有以下几个步骤: a.尺度空间金字塔结构的构造 和SIFT类似,尺度空间金字塔是由不同的尺度 ...