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. C# datatable 与 xml文件之间的转换

    /// <summary> /// datatable转XML文件 /// </summary> /// <param name="dtTable"& ...

  2. 【ABAP系列】SAP 生产订单完工确认(CO11N) BAPI : BAPI_PRODORDCONF_CREATE_TT

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 生产订单完工确认(CO1 ...

  3. rac节点挂掉后，vip飘到别的节点，但是业务连接不上报 no listener问题处理

    客户一套rac系统,三节点,其中一个节点的p260主机主板有问题(经常机器重启,好像是这个型号的通病,主板被炒到20W),临时把故障节点的vip作为业务地址用. 首先,查看确定故障节点vip飘到那个节 ...

  4. hacker101----XSS Review

    所有你见过XSS行动在这一点上,但我们来回顾一下今天我们要讨论的XSS类型: 反射型XSS --  来自用户的输入将直接返回到浏览器,从而允许注入任意内容  [浏览器输入,马上到服务器上,再反射回来直 ...

  5. 设置IIS的gzip

    如果服务器iis 中没有配置动态压缩的话,在性能中选项中配置. 设置成功之后:

  6. MySQL-第十五篇使用连接池管理连接

    1.数据库连接池的解决方案是: 当应用程序启动时,系统主动建立足够的数据库连接,并将这些连接组成一个连接池.每次应用程序请求数据库连接时,无需重新打开连接,而是从连接池中取出已有的连接使用,使用完后不 ...

  7. 【洛谷 p2672】推销员

    推销员[题目链接] 好了为了凑字数先把题目复制一下: 好了题解第一篇正解: 首先输入,莫得什么好说的: scanf("%d",&n); ;i<=n;i++) scan ...

  8. Topcoder SRM656div1 250 ( 期望DP )

    Problem Statement    Charlie has N pancakes. He wants to serve some of them for breakfast. We will n ...

  9. ssh_exchange_identification: read: Connection reset by peer解决办法

    使用本地终端连接centos服务器,提示ssh_exchange_identification: read: Connection reset by peer $ssh root@10.xxx.xxx ...

  10. [ASP.NET Core 3框架揭秘] 依赖注入：依赖注入模式

    原文:[ASP.NET Core 3框架揭秘] 依赖注入:依赖注入模式 IoC主要体现了这样一种设计思想:通过将一组通用流程的控制权从应用转移到框架之中以实现对流程的复用,并按照“好莱坞法则”实现应用 ...