demo：

截图：

结构：
1、swiper-progress.html
2、css文件夹

-swiper.css

-swiper.min.css

3、js文件夹

-swiper.min.js

-swiper.js

swiper-progress.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

  <title>移动端左右滑动demo</title>

  <!-- CSS -->

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

  <!-- Demo styles -->

  <style>

    html, body {

      position: relative;

      height: 100%;

    }

    body {

      -webkit-tap-highlight-color:rgba(255,0,0,0);

      background: #fff;

      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

      font-size: 14px;

      color:#000;

      margin: 0;

      padding: 0;

    }

    .swiper-container {

      width: 100%;

      height: 100%;

    }

    .swiper-slide {

      text-align: center;

      font-size: 18px;

      background: #fff;

      /* Center slide text vertically */

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      -webkit-justify-content: center;

      justify-content: center;

      -webkit-box-align: center;

      -ms-flex-align: center;

      -webkit-align-items: center;

      align-items: center;

    }

  </style>

</head>

<body>

  <!-- Swiper -->

  <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 class="swiper-slide">Slide 4</div>

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

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

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

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

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

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

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

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

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

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

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

    </div>

    <!-- 进度条 -->

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

  </div>

  <!-- Swiper JS -->

  <script src="js/swiper.min.js"></script>

  <!-- Initialize Swiper -->

  <script>

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

      pagination: {

        el: '.swiper-pagination',

        type: 'progressbar',

      },

    });

  </script>

<!-- 微信内禁止上下拉 -->

<script type="text/javascript">

window.onload = function(){

    document.body.addEventListener("touchmove",function(event){

        event.preventDefault();

        });

};

  </script>

</body>

</html>

*上面加入了禁止微信下拉的js，适合不会产生滚动条的页面，如果你的页面会有滚动条，请把禁止微信下拉的js去掉，否则滚动条就被卡住不能往下拉了。

css和js文件下载
链接: https://pan.baidu.com/s/1j4jk... 密码: 5kti

html+js(swiper.js)+css左右滑动切换页面效果，适配移动端的更多相关文章

  1. uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题

    效果图: tab栏可以滑动,切换页面跟随tab栏同步滑动.这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度. 下面是代码 html < ...

  2. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  3. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  4. ViewPager源码分析——滑动切换页面处理过程

    上周客户反馈Contacts快速滑动界面切换tab有明显卡顿,让优化. 自己验证又没发现卡顿现象,但总得给客户一个技术性的回复,于是看了一下ViewPager源码中处理滑动切换tab的过程. View ...

  5. VUE 实现tab切换页面效果

    一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. Android切换页面效果的实现一：WebView+ViewFlipper

    前言: 这两周在帮学校做一个新生入学用的“新里程”的项目,要做到页面切换阅读的效果,自己百度了下,找到普遍是使用WebView+ViewFlipper的实现方法,但这种方法不能满足我的要求,因为它很难 ...

  7. Android切换页面效果的实现二：WebView+ViewPager

    前言: 由于第一种切换页面的效果不能满足项目的要求,于是又找到另外一种更简单好用的方法来实现,顿时感觉,做项目开发,找到一种合适的方法能够减少很多时间,(刚开始自己弄的时候还想着自己写手势识别的方法呢 ...

  8. js——swiper.js

    一款用于PC端和移动端的滑动效果插件. 中文网站:http://www.swiper.com.cn/#   点击中文教程.使用方法 1. initialSlide:初始索引值,从0开始 2.pagin ...

  9. H5手指滑动切换卡片效果

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

随机推荐

  1. SqlServer 主重复制

    一.准备工作: 主数据库服务器: OS:Windows Server 2008 R2    DB: SQL Server 2008 R2 Hostname : CXMasterDB IP: 192.1 ...

  2. django中orm多表查询，减少数据库查询操作

    .select_related()   的使用

  3. Java日志使用slf4j 配置log4j后,有日志文件 但日志文件内容为空

    SLF4J的全称是Simple Logging Facade for Java,即简单日志门面. SLF4J并不是具体的日志框架,而是作为一个简单门面服务于各类日志框架,如java.util.logg ...

  4. [Markdown] 02 简单应用 第二弹

    目录 4. 插入链接 4.1 Markdown 的方式 用法 1 用法 2 4.2 HTML5 的方法 用法 1 用法 2 5. 插入图片 5.1 使用网络地址 5.2 使用本地地址 5.2.1 小括 ...

  5. xml与Properties的区别

    1.properties配置文件,是一个属性对应于一个值(key = value)这样的键值匹对模式: 每一行properties配置文件的键值,对应着一次赋值: 特殊点: 在前后两行properti ...

  6. 华为交换机SOCK CPU占用率高处理方法

    问题截图: 解决方法: cpu-defend policy cpu auto-defend enable auto-defend attack-packet sample 5 auto-defend ...

  7. Java虚拟机最多支持多少个线程？

    作者:miracle1919  来源:http://sina.lt/getP McGovernTheory在StackOverflow提了这样一个问题:Java虚拟机最多支持多少个线程?跟虚拟机开发商 ...

  8. dfs（魔力转圈圈）

    http://oj.jxust.edu.cn/contest/problem?id=1563&pid=4 题目描述 Storm有一个m行n列的整数矩阵. 他会从(1,1)开始,顺时针螺旋访问该 ...

  9. java 接口 以及 与抽象类的区别

    狭义概念 : Java 中的 interface 广义概念 : 对外提供规则的都是 接口 接口的定义方式 :  interface 接口名 { } 用类实现接口:       class 类名 imp ...

  10. P2731 骑马修栅栏 （欧拉路径）

    [题目描述] John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个栅栏.你必须编一个程序,读入栅栏网络的描述,并计算出一条修栅栏的路径,使每个栅栏都恰好被经过一次.John能从任何一 ...