swiper.js 移动端触摸滑动插件
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 移动端触摸滑动插件的更多相关文章
- 移动端触摸滑动插件Swiper
移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...
- swiper嵌套小demo(移动端触摸滑动插件)
swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 : https://github.com/Clear ...
- 移动端触摸滑动插件Swiper使用指南
Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...
- Swipe-移动端触摸滑动插件swipe.js
原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...
- Swiper --移动端触摸滑动插件
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
- JS封装移动端触摸滑动插件应用于导航banner【精装版】
自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper( {parent, child, type, parentN, c ...
- 仿移动端触摸滑动插件swiper,的简单实现
/** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...
- 最好的移动触摸滑动插件:Swiper
最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...
- 自己用原生JS写的轮播图,支持移动端触摸滑动,分页器圆点可以支持mouseover鼠标移入和click点击,高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
随机推荐
- Java-生成验证码图片(自定义内容,尺寸,路径)
1 package cn.gp.tools; import java.awt.*; import java.awt.image.BufferedImage; import java.io.*; imp ...
- ScheduleThreadPoolExecutor源码分析(二)
DelayedWorkQueue: DelayedWorkQueue实现了BlockingQueue接口,因此其可以作为线程池的任务队列.BlockingQueue的主要属性有以下几个: privat ...
- 用arm-linux-gcc v4.3.4交叉编译Qt4.8.3
1.解压缩 #tar zxvf qt-everywhere-opensource-src-4.8.3.tar.gz 2. configure #mkdir buildarm-static #cd b ...
- springMVC整合memcached,以注解形式使用
睡不着,深夜写点博客.闲下来有一个月了,心里多少有点…… 在北京找工作一再受阻,这个时间点也不好找 再接再厉 之前没有用过memcached,没有什么实战经验,看了一些关于memcached的博客,写 ...
- MySQL Procedure(MySQL存储过程)[转]
------Creating Stored Procedures in MySQL------ --Make sure you have version 5 of MySQL: SELECT VE ...
- [转载]windows下安装Python虚拟环境virtualenvwrapper-win
1 前言 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv 这个工具,就可以构建一系列 虚拟的Py ...
- WWDC2014之iOS使用动态库
苹果的开放态度 WWDC2014上发布的Xcode6 beta版有了不少更新,其中令我惊讶的一个是苹果在iOS上开放了动态库,在Xcode6 Beta版的更新文档中是这样描述的: Frameworks ...
- ps使用方法续
1.找一张皱折的背景,将需要制作的照片拖入背景层,调整尺寸并裁剪,使之 与背景边框相配, 2.调整-色相饱和度,全图:饱和度-35,明度+10, 3.调整图层改成柔光模式,出来旧照片的效果了, 4.色 ...
- BZOJ 1020 安全的航线flight
Description 在设计航线的时候,安全是一个很重要的问题.首先,最重要的是应采取一切措施确保飞行不会发生任何事故,但同时也需要做好最坏的打算,一旦事故发生,就要确保乘客有尽量高的生还几率.当飞 ...
- 【HDOJ】3309 Roll The Cube
BFS,考虑一球进洞仅一球滚动以及两球重叠的情况即可. /* 3309 */ #include <iostream> #include <queue> #include < ...