API链接：

http://www.swiper.com.cn/api/start/2014/1218/140.html

<body>
　　<div class="swiper-container">
　　　　<div class="swiper-wrapper">
　　　　　　<div class="swiper-slide"><img src="data:images/1.jpg"></div>
　　　　　　<div class="swiper-slide"><img src="data:images/2.jpg"></div>
　　　　　　<div class="swiper-slide"><img src="data:images/3.jpg"></div>
　　　　</div>
　　　　<!-- 如果需要分页器 -->
　　　　<div class="swiper-pagination"></div>
　　</div>
　　<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>
</body>

<script> 
var mySwiper = new Swiper ('.swiper-container', {
　　direction: 'horizontal',
　　loop: false,
　　initialSlide:1, //初始化页面的索引
　　// 如果需要分页器
　　pagination: '.swiper-pagination',
　　//3d翻页
　　/*
　　coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：
　　rotate：slide做3d旋转时Y轴的旋转角度。默认50。
　　stretch：每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
　　depth：slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
　　modifier：depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
　　slideShadows：开启slide阴影。默认 true。
　　*/
　　effect : 'coverflow',
　　slidesPerView: 2,
　　centeredSlides: true,
　　coverflow: {
　　rotate: 0,
　　stretch: 50,
　　depth: 60,
　　modifier: 2,
　　slideShadows : false
}
}) 
</script>

swiper.js 移动端触摸滑动插件的更多相关文章

  1. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  2. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  3. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  4. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  5. Swiper --移动端触摸滑动插件

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  6. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

  7. 仿移动端触摸滑动插件swiper,的简单实现

    ​ /** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...

  8. 最好的移动触摸滑动插件：Swiper

    最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...

  9. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

随机推荐

  1. 层模型--相对定位(position:relative)

    如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...

  2. Apache配置完虚拟主机后，使用Chrome访问localhost还是默认目录htdocs

    Chrome 解析DNS出错,这个错误比较罕见,甚至说有点奇特.今天在使用Apache配置虚拟主机时,出现了一个非常奇怪的现象.我按照配置的步骤配置虚拟主机,如下 配置虚拟主机的步骤如下: 1. 启用 ...

  3. CSS3学习--dispaly:inline和float:left两者区别

    1.display:inline: 任何不是块级元素的可见元素都是内联元素.其表现的特性是“行布局”形式!(行布局:其表现形式始终以行进行显示)   2.float:left:指定元素脱离普通的文档流 ...

  4. 支付宝支付错误 系统忙：错误代码AE150002999

    今天出现支付宝支付错误,支付系统繁忙请稍等,错误码AE150002999.测试了其他连个收款方,可跳转到正常扫码支付页面,排除了代码错误. 在登录支付宝商家中,也签约了“即时到帐”功能.度娘和查看都找 ...

  5. PHPCMS V9调用时间标签 |日期时间格式化

    PHPCMS V9 如何调用时间标签,下面分享常见的调用时间标签 |日期时间格式化  1.日期时间格式化显示: a标准型:{date('Y-m-d H:i:s', $rs['inputtime'])} ...

  6. C++实现红黑树，仿STL封装

    //RB_Tree.hpp //The code of red black trees //2011/12/31 by Adoo // The foundation :http://www.roadi ...

  7. ASP.NET MVC轻教程 Step By Step 3 ——使用ViewBag

    在上一节我们创建了与Index动作方法对应的Index视图,那么Index动作方法该如何向Index视图传送数据呢?其中一个方法是使用ViewBag(视图包).让我们试试看. 在Index动作方法中添 ...

  8. Java 中 Comparable 和 Comparator 比较（转）

    转自http://www.cnblogs.com/skywang12345/p/3324788.html 本文,先介绍Comparable 和Comparator两个接口,以及它们的差异:接着,通过示 ...

  9. 稍加详细的ATR信息，将完善历史字节部分+

    http://blog.csdn.net/jennyvenus/article/details/2900697 //Reset 3B FB 13 00 00 81 31 FE 45 65 46 53 ...

  10. MySQL默认INFORMATION_SCHEMA,MySQL,TEST三个数据库用途

    本文简要说明了MySQL数据库安装好后自带的INFORMATION_SCHEMA,MySQL,TEST三个数据库的用途. 第一个数据库INFORMATION_SCHEMA:提供了访问数据库元数据的方式 ...