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. git 教程 git.oschina.net

    官方说明:http://git.oschina.net/oschina/git-osc/wikis/%E5%B8%AE%E5%8A%A9#ssh-keys 安装完成后,在开始菜单里找到"Gi ...

  2. javascript--烟火效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta nam ...

  3. 用连接池提高Servlet访问数据库的效率

    Java Servlet作为首选的服务器端数据处理技术,正在迅速取代CGI脚本.Servlet超越CGI的优势之一在于,不仅多个请求可以共享公用资源,而且还可以在不同用户请求之间保留持续数据.本文介绍 ...

  4. topcoder算法练习2

    Problem Statement      In most states, gamblers can choose from a wide variety of different lottery ...

  5. java浮点数剖析

    定点数表达法的缺点在于其形式过于僵硬,固定的小数点位置决定了固定位数的整数部分和小数部分,不利于同时表达特别大的数或者特别小的数.计算机系统采纳了所谓的浮点数表达方式.这种表达方式利用科学计数法来表达 ...

  6. Idea中运行Testng时，报SAXParseException：parallel为none的问题原因及解决

    今天更新了testng的版本为6.9.10, 在idea中运行测试案例时,报错如下: org.testng.TestNGException: org.xml.sax.SAXParseException ...

  7. 一个CS出身的基本素养

    从前天10号提交Paper之后,连三个晚上之后突然正常起来竟然变成倒时差状态. 这周打算给自己一个空窗期,好好想想下两到三个月要做的事. 好吧,除了"一日一算法",当下两个月还有一 ...

  8. mysql的SQL_CALC_FOUND_ROWS 使用

    mysql的SQL_CALC_FOUND_ROWS 使用 标签: sqlmysqltable 2007-02-27 11:40 5073人阅读 评论(0) 收藏 举报  分类: Mysql数据库技术( ...

  9. 酷炫地给py代码标上行数

    Python IDLE是没有显示行号的功能的,今天学了一个方式可以酷炫地给自己的代码加上行号,该方法直接修改代码,慎用哦!代码如下: import fileinput for line in file ...

  10. install ubuntu

    http://wenku.baidu.com/link?url=Cq6nB1ArObV1liMUT13ZB9o16NQ0-FpELt37R6NuPvz7zoKlz14Mu_k-8CwqQodWpRC8 ...