引入文件的必要性

<link href="css/swiper.min.css" rel="stylesheet" type="text/css">

        <script type="text/javascript" src="js/jquery-1.11.2.js"></script>

        <script type="text/javascript" src="js/swiper.min.js"></script>

文件下载地址http://www.swiper.com.cn/download/index.html#file7

使用

<div

class="swiper-container">

<div

class="swiper-wrapper">

<div

class="swiper-slide">Slide 1</div>

<div

class="swiper-slide">Slide 2</div>

<div

class="swiper-slide">Slide 3</div>

</div>

<!-- 假设须要分页器 -->

<div

class="swiper-pagination"></div>

<!-- 假设须要导航button -->

<div

class="swiper-button-prev"></div>

<div

class="swiper-button-next"></div>

<!-- 假设须要滚动栏 -->

<div

class="swiper-scrollbar"></div>

</div>

<script>

    var swiper = new Swiper('.swiper-container', {

        pagination: '.swiper-pagination',

        paginationClickable: true,

//        direction: 'vertical',  设置成vertical能够控制屏幕上下滑动,默认的是左右滑动

//        speed:1000,  

    });

</script>

假设页面中使用的有css3动画。要在每次翻页时载入动画。能够将动画写成这样的样式

@keyframes slideInLeft {

  0% {

    -webkit-transform: translateX(-100%);

    -ms-transform: translateX(-100%);

    transform: translateX(-100%);

    visibility: visible;

  }





  100% {

    -webkit-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0);

  }

}



这儿加上.swiper-slide-active div

.swiper-slide-active div.slideInLeft {

  -webkit-animation-name: slideInLeft;

  animation-name: slideInLeft;

}

很多其它用法查看swiper的官方站点http://www.swiper.com.cn/usage/index.html

的影响,如下面的:

swiper实现触摸滑动的更多相关文章

  1. 移动端网站的内容触摸滑动-Swiper插件

    手机平板等大多移动端站点都会有触摸滑动内容的功能,公司移动端站点(m.muzhiwan.com)的标题广告滑动以及轮播效果就是用的Swiper插件. Swiper就是常用于移动端网站的内容触摸滑动的一 ...

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

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

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

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

  4. 最好的移动触摸滑动插件:Swiper

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

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

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

  6. Swipe JS – 移动WEB页面内容触摸滑动类库

    想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...

  7. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  8. android131 360 05 手势触摸滑动,sim卡,开机启动的广播,手机联系人,SharedPreferences,拦截短信

    安卓手势触摸滑动: package com.itheima52.mobilesafe.activity; import android.app.Activity; import android.con ...

  9. 简易实现 TextView单行文本水平触摸滑动效果

    为了方便查看,已使用markdown编辑形成新博文. 本文Mardown地址 近期做应用的时候实用到TextView单行长文本,当文本内容过长时候又想实现触摸水平滑动效果. 网上找了非常多,都没有看到 ...

随机推荐

  1. OutputCache说明

    当用户访问该页面,整个页面会server存储在内存中,因此,该页面缓存.当用户再次访问该页面,页面不会再次运行数据操作,页面首先检查server中是否存在缓存.假设缓存存在,则直接从缓存中获取页面信息 ...

  2. [LeetCode328]Odd Even Linked List

    题目: Given a singly linked list, group all odd nodes together followed by the even nodes. Please note ...

  3. C#中对于float,double,decimal的误解

    原文:C#中对于float,double,decimal的误解 一直很奇怪C#的预定义数据类型中为什么加了一个decimal,有float和double不就够了吗?今天来挖一挖. 浮点型 如果我们在代 ...

  4. 怎样解决No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=x86_64, VALID_ARCHS=i386).

    怎样解决No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=x86_64, VALID_ARCHS=i386). 错误 ...

  5. iOS_67控件外观对照

    iOS 7 button无边框,操作栏透明,控制器全屏 Tab Bar 对照 iOS 7                                                         ...

  6. Oracle 初始化参数文件pfile和spfile

    pfile和spfile差额 pfile :Oracle 9i之前.ORACLE使用我们一直PFILE存储的初始化参数,,能够在操作系统级别改动. 当spfile文件改动出现错误导致oracle无法启 ...

  7. SQL_substr功能测试

    原创作品.从 "深蓝blog" 博客,欢迎转载,请务必注明转载的来源.权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong/articl ...

  8. Unity3D-RPG项目实战(1):发动机的特殊文件夹

    前言 从8月份開始.下定决心正式開始学习Unit3D啦.尽管自己写过两代端游引擎,被应用的项目也超过10个,Unreal Engine也搞过几年,只是做手游.哥确实还是个新手.Unity3D这个引擎我 ...

  9. 类似的微博推断客户关系sql声明

    类别似新浪微博的关注和共同关心 不知道别人是怎么设计的. 反正我是例如以下设计的 ID   USER   FRIEND 1     A         B 2      B         A 3   ...

  10. redhat6.3已安装was6.1你可以不弹出安装程序

    这在为期两天的课程redhat6.3安装was6.1 使用Xmanager打开图形界面.进入/WAS夹,跑./install 它有一个直接跳转,不管是什么反应,起初我以为这个问题的图形界面,搜索了半天 ...