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. Python笔记(二十五)_魔法方法_描述符

    描述符的属性方法 __get__(self, instance, owner): 用于访问属性,返回属性的值 __set__(self, instance, value): 用于给属性赋值时,返回属性 ...

  2. 【ABAP系列】SAP ABAP POPUP弹出框自建内容

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP POPUP弹出框自 ...

  3. Docker command line 学习笔记

    deprecated ! 以后直接对这个更新 http://wangzhezhe.github.io/blog/2015/08/10/docker-operations/ 之前整理了好久,每次用到一点 ...

  4. 设置HTML中字体的粗细

    设置font-weight 属性:normal : 默认值.正常的字体.相当于 400 .声明此值将取消之前任何设置bold : 粗体.相当于 700 .也相当于 b 对象的作用bolder : 比 ...

  5. 关于存储过程的一些sql

    1.关于事务的回滚Set XACT_ABORT ON; 开启为on时 ,如果事务语句产生运行错误 ,将整个事务终止进行回滚,Off时只回滚产生错误的语句. 2.获取事务语句中上一次插入值的行号@@ID ...

  6. git篇之二----团体项目中使用git

    上篇说了git的简单入门,本篇来说一下在团体项目中我们该如何简单使用git 一般来说,当我们进入公司之后,就前端项目而言,若是有多个同事共同开发一个系统,我们可能会每个人去负责各自的模块. 若是人员较 ...

  7. Struts2异常：HTTP Status 404 - /Struts2/book/addBook.action

    HTTP Status 404 - /Struts2/book/addBook.action 如果在Struts2的框架中访问路径出现了这个错误,可能存在的原因有如下的两个: 1. 路径写错,也就是a ...

  8. 分享一篇Linux系统使用Tomcat服务时交互式修改server.xml中端口号的shell脚本

    #!/bin/bash echo -e '\n' echo "***********************************" port1=`grep -r "s ...

  9. getCurrentSession 与 openSession区别

    getCurrentSession () 使用当前的session openSession()重新建立一个新的session 使用SessionFactory.getCurrentSession()需 ...

  10. <每日一题> Day3：CodeForces-1141B.MaximalContinuousRest(简单题)

    题目链接 参考代码: #include <iostream> #include <algorithm> using namespace std; + ; int value[m ...