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. git_04_回退到上个版本

    前言 使用git版本控制的过程中,多人操作同一个项目时,有时经常会遇到代码冲突报错,一时又无法解决的问题,为了不影响他人正常使用这时便需要回滚代码至原来的版本.如何回滚代码至原来版,可参考以下步骤. ...

  2. javascript中json字符串对象转化

    li = [1,2,3,4] s = JSON.stringify(li)  ---转化为字符串 JSON.parse(s) --转化为对象

  3. run_jetty_run插件安装

    eclipse安装run_jetty_run不能使用在线模式,因为Google等网站已经被屏蔽,不能访问.要先下载jar包,本地安装.

  4. ODBC Driver Development

    ODBC Driver Development By Vikash Agarwal, May 01, 2002 Open your database system to the world. Vika ...

  5. 2019年华南理工大学软件学院ACM集训队选拔赛 Round1

    TIps: 1.所有代码中博主使用了scanf和printf作为输入输出  2.代码中使用了define LL long long 所以在声明变量的时候 LL其实就等价于long long 希望这两点 ...

  6. El 表达式和 Jstl 标签库

    El 表达式学习 1. 什么是 EL 表达式 全称:Expression Language,一种写法非常简介的表达式.语法简单易懂,便于使用.表达式语言的灵感来自于 ECMAScript 和XPath ...

  7. 工作中常见的hive语句总结

    hive的启动: 1.启动hadoop2.开启 metastore 在开启 hiveserver2服务nohup hive --service metastore >> log.out 2 ...

  8. <meta>标签中http-equiv属性的属性值X-UA-Compatible详解

    X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE> ...

  9. 入门级，关于下载设置wamp的安装

    将wamp下载下来,分清楚自己电脑是32还是64位,在安装之前,首先确定你电脑里安装了vc++ 的运行库,不然安装wamp后会出现提醒缺少XXX文件,但是注意,在安装vc运行库的时候,请搜索集合包类的 ...

  10. java synchronized实现可见性对比volatile

    问题: 大家可以先看看这个问题,看看这个是否有问题呢? 那里有问题呢? public class ThreadSafeCache { int result; public int getResult( ...