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. OC - 23.核心动画基础

    概述 简介 核心动画提供了一组非常强大的动画API,通过该组API可以高效的实现绝大部分绚丽的动画效果 注意事项 核心动画的操作在子线程中执行,不会阻塞主线程 核心动画直接作用与CALayer对象上, ...

  2. iOS CGContextRef 画图小结

    CGContextRef context = UIGraphicsGetCurrentContext(); //设置上下文 //画一条线 CGContextSetStrokeColorWithColo ...

  3. C#入门经典（第五版）学习笔记（二）

    ---------------函数---------------参数数组:可指定一个特定的参数,必须是最后一个参数,可使用个数不定的参数调用函数,用params关键字定义它们 例如: static i ...

  4. hdu 4502吉哥系列故事——临时工计划 (简单DP)

    Problem Description 俗话说一分钱难倒英雄汉,高中几年下来,吉哥已经深深明白了这个道理,因此,新年开始存储一年的个人资金已经成了习惯,不过自从大学之后他不好意思再向大人要压岁钱了,只 ...

  5. 网页布局只mian部分左右固定，中间部分自适应

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 【JQuery学习历程】2.JQuery选择器

    基本选择器 选择器 描述 返回 示例 #id 根据给定的id匹配元素 单个元素 $("#myId") .class 根据给定的class类匹配元素 集合元素 $(".my ...

  7. 翻译-让ng的$http服务与jQuerr.ajax()一样易用

    Make AngularJS $http service behave like jQuery.ajax() 让ng的$http服务与jQuerr.ajax()一样易用 作者zeke There is ...

  8. 如何参与github上的开源项目

    今晚比较闲,于是乎装修了一下博客,顺便将一块心病(怎么参加github上的开源项目)解决了,最后发个文章总结下 这些是参考的链接 http://blog.csdn.net/five3/article/ ...

  9. cygwin编译ffmpeg移植到android平台问题集锦

    编译环境: windows xp Cygwin 1.1.3.1 NDK r9 1.提示各种command not found 比如 ./config.sh: line 6: $'--arch=arm\ ...

  10. 从NIB中加载VIEW

    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"ChatMoreView" owner:nil options:nil]; ...