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. IntelliJ IDEA的常用设置

    1.设置IDEA主题样式 ①设置方法: ②效果:设置为Darcula之后整体的风格就是暗黑主题,如上图. 2.设置编辑区主题 ①设置方法: 注:由于IDEA自带的编辑区主题比较少,想要更多的编辑区主题 ...

  2. 练习3-python-创造百万条数据库数据

    有时候需求大批量的数据做测试支撑,如果使用传统的添加数据的方式可能比较耗费时间,利用python可以轻松的完成这项任务,还可以后续维护使用脚本. 方法1:insert into table selec ...

  3. 【ABAP系列】SAP 业务界面同时显示KEY和文本

      公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 业务界面同时显示KEY和 ...

  4. unity 编辑器教程

    教程1:https://blog.csdn.net/u010019717/article/details/80300136 教程2:https://blog.csdn.net/liqiangeasts ...

  5. Nginx配置之rewrite、proxy_pass、upstream、location

    如图,这是Nginx的配置文件nginx.conf中的一段配置代码. 在http段中定义了一个名为webservers的upstream模块,主要用于负载均衡. 在server模块中,定义了一个loc ...

  6. [Git] 001 初识 Git 与 GitHub 之新建仓库

    在 GitHub 的 UI 界面使用 Git 新建一个仓库 1. 点击右上角的 +,选择 New repository 2. 网站会自动跳转至新页面,在下框中填入仓库名 仓库名也有讲究,挖个坑,日后填 ...

  7. ARM汇编1

    一. 指令和伪指令 1.1. 指令 a. (汇编)指令是CPU机器指令的助记符,经过编译后会得到一串10组成的机器码,可以由CPU读取执行. 1.2. 伪指令 b. (汇编)伪指令本质上不是指令(只是 ...

  8. Django设置允许跨域请求

    方式一: 在中间件中 def process_response(self, request, response): response['Access-Control-Allow-Origin'] = ...

  9. 山区建小学（区间dp+前缀和+预处理）

    [题目描述] 政府在某山区修建了一条道路,恰好穿越总共m个村庄的每个村庄一次,没有回路或交叉,任意两个村庄只能通过这条路来往.已知任意两个相邻的村庄之间的距离为di(为正整数),其中,0 < i ...

  10. spark复习笔记(7):sparkSQL

    一.saprkSQL模块,使用类sql的方式访问Hadoop,实现mr计算,底层使用的是rdd 1.hive //hadoop  mr  sql 2.phenoix //hbase上构建sql的交互过 ...