jQuery自适应轮播图插件Swiper用法示例

xiyanwushi 2016-08-24

本文实例讲述了jQuery自适应轮播图插件Swiper用法。分享给大家供大家参考，具体如下：

运行效果截图如下：

jQuery自适应轮播图插件Swiper用法示例

示例代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>新建H5自适应模板</title>
<link rel="stylesheet" href="swiper-3.3.1.min.css">
<style>
html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  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;
  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>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="images/banner01.jpg"></div>
    <div class="swiper-slide"><img src="images/banner02.jpg"></div>
    <div class="swiper-slide"><img src="images/banner03.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script src="swiper-3.3.1.jquery.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true
});
</script>
</body>
</html>

关于swiper的内容读者可参考相关网站：http://www.swiper.com.cn/download/index.html

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

xiyanwushi

xiyanwushi

相关推荐

java 企业门户网站 源码 自适应响应式 freemarker 静态引擎 html5 SSM

4.springmvc +spring4.3.7+ mybaits3.3SSM 普通java web数据库：mysql

如狼 / 0评论 2020-08-15

CSS网页布局基础

CSS网页布局基础1.行布局-基础的行布局-行布局自适应-行布局自适应限制最大宽-行布局垂直水平居中-行布局某部位自适应-行布局固定宽-行布局导航随屏幕滚动2.多列布局-两列布局固定-两列布局自适应-三列布局固定-三列布局自适应3.混合布局-混合布局固定-

csstpeixun / 0评论 2020-08-07

直播低延时踩坑

目前使用比较多的是网络测速、用户个人连接数据分析和用户群体连接数据分析等几种方法来选择最优的网络路径。1）网络测速：推流端在推流之前，向各个路径发送简单的数据包，然后根据数据包响应的时间来推测哪条路径最快。每个主播用户的使用历史数据是有规律可循的。基于UD

anyushan / 0评论 2020-06-30

重磅！快手发布直播多码率自适应行业标准

近日，快手正式对外发布基于流式的直播多码率自适应标准LAS，用于提供低延迟、平滑、流畅的直播多码率体验。据悉，快手同时开源了LAS的端到端解决方案，包括服务端、客户端、业界领先的多码率自适应算法等，帮助业界实现零门槛接入和使用LAS。今年疫情期间，直播业务

zego实时音视频 / 0评论 2020-06-23

从零开始在vue-cli4配置自适应vw布局的实现

viewportWidth也是vw布局从配置上来说比rem布局简洁了很多，bu需要配置安装lib，也不需要增加一个rem.js文件。在vue.config.js中找到loaderOptions，如果没有的话需要在css属性下增加postcss. selec

oKeYue / 0评论 2020-06-14

深度残差网络+自适应参数化ReLU激活函数（调参记录15）

在调参记录14里，只有2个残差模块，结果遭遇欠拟合了。Minghang Zhao, Shisheng Zhong, Xuyun Fu, Baoping Tang, Shaojiang Dong, Michael Pecht,Deep Residual Ne

xiaoxiaokeke / 0评论 2020-05-19

CSS技术让高度自适应减少很多不必要的检测

给出现高度塌陷的元素添加：overflow:hidden;原理：overflow:hidden;触发了一个 BFCBFC规定：计算BFC高度时候，浮动元素也参与计算。在浮动元素的下方（同级）添加一个空的div，给div设置样式div{clear:both;

AlisaClass / 0评论 2020-05-16

[ORACLE]自适应游标共享Adaptive Cursor Sharing

v$SQL_CS_SELECTIVITY --查看SQL游标的各个变量选择范围,它包含着各个条件谓词,绑定变量值以及它的最大值和最小值等信息。select IS_BIND_SENSITIVE,IS_BIND_AWARE,IS_SHAREABLE,SQL_T

Justdoit00 / 0评论 2020-04-26

java 企业门户网站 源码 自适应响应式 freemarker 静态引擎 html5 SSM

4.springmvc +spring4.3.7+ mybaits3.3SSM 普通java web数据库：mysql

rionchen / 0评论 2020-04-09

java 企业门户网站 源码 自适应响应式 freemarker 静态引擎 html5 SSM

4.springmvc +spring4.3.7+ mybaits3.3SSM 普通java web数据库：mysql

86384798 / 0评论 2020-04-04

自适应哈希索引(Adaptive Hash Index, AHI) 转

比如我们每次从辅助索引查询到对应记录的主键,然后还要用主键作为search key去搜索主键B+tree才能找到记录.AHI还有一些要求，对这个页的连续访问模式必须是一样的。一些资料统计,启用AHI后，读取和写入速度可以提高2倍，辅助索引的连接操作性能可以

贤冰 / 0评论 2020-03-08

字体大小自适应纯css解决方案【转】

css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+. 但是该方案存在一个bug，上面的代码，当浏览器窗口变化的时候，box中的文

云端漂移 / 0评论 2020-03-05

css 纯css自适应页面 示例

.fl-table thead, .fl-table tbody, .fl-table thead th {

沈宫新 / 0评论 2020-02-16

【红外DDE算法】聊聊红外图像增强算法的历史进程（第一回）

宽动态红外图像增强算法综述回顾过去带你回顾宽动态红外图像增强算法的历史进程，历来学者的一步步革命，一步步改革，从简单粗暴到细致全面。没有完美的算法，也没有最好的算法，只有更好更优秀的算法。展望未来以现在看90年代的算法，那时候的算法是有点粗糙，但是正是在这

数据与算法之美 / 0评论 2020-01-23

前端页面自适应

页面的头部加上这句话.

MrHaoNan / 0评论 2020-01-08

自适应OFDM

在信道条件好的子信道传输较多的信息比特并且分配更多的能量，在深衰落的子信道上传输较少的信息比特甚至不传信息，从而提高系统整体传输效率。误码率最小化分配算法：在给定总的发射功率和维持恒定传输速率的前提下，通过使各个子信道的信噪比最大，从而使得总体误比特率最小

yuanran0 / 0评论 2019-12-25

css自适应布局

布局时候的要点是计算出划分的版块在设计图中所占的百分比，要注意提前将html，body{height:100%;}

nicepainkiller / 0评论 2019-12-24

使用svg让页面自适应浏览器大小，整体等比缩放

var setHeight = setWidth * viewBoxHeight / viewBoxWidth;

mapaler / 0评论 2019-12-23

CSS | 自适应两栏布局方法

<div class="left" style="background: #00FF7F; width: 200px; min-height: 200px;">固定宽度</div>. <

CaiKanXP / 0评论 2019-12-21

layui 数据表格自适应高度

height: inherit;

囧芝麻 / 0评论 2019-12-20

bootstrap自适应和响应式布局的区别

bootstrap是依赖jquery的，使用时先装上jquery。

乔乔 / 0评论 2019-12-16

固定宽度布局开发WebApp如何实现多终端下自适应？

在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站。在css中我们一般使用px作为单位，在桌面浏览器中cs

wangjie / 0评论 2019-12-01

jquery 实现iframe 自适应高度

超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。注意别放错地方了哦。<iframe name="rightIframeName&quo

我只是个程序员 / 0评论 2014-01-18

android系统如何自适应屏幕大小

2、android多屏幕支持机制Android的支持多屏幕机制即用为当前设备屏幕提供一种合适的方式来共同管理并解析应用资源。默认图片默认标配 "medium" 。

huohu00 / 0评论 2013-07-11

4种必须知道的Android屏幕自适应解决方案

目前最为推荐的Android多屏幕自适应解决方案。该属性的作用是决定控件在其父布局中的显示权重，一般用于线性布局中。其值越小，则对应的layout_width或layout_height的优先级就越高，一般横向布局中，决定的是layout_width的优先

lumitzs / 0评论 2013-08-29

python机器学习——自适应线性神经元

上篇博客我们说了感知器，这篇博客主要记录自适应线性神经元的实现算法及一些其他的训练细节，自适应线性神经元由Bernard Widrow和他的博士生Tedd Hoff提出，对感知器算法进行了改进。当然Adaline对输入向量x的处理和感知器是一样的，都是使用

kingzone / 0评论 2019-11-13

自适应网页设计

2010年，Ethan Marcotte提出了"自适应网页设计"这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

张骞 / 0评论 2014-06-22

css页面布局技巧

display:inline-block; /*变成行内块元素，让元素宽度自适应，不继承父元素宽度；*/

wangnantjobj / 0评论 2019-11-03

假设高度已知，请写出三栏布局，其中左栏右栏宽度各为300px，中间自适应

float: left;width: 300px;background: red;float: right;width: 300px;background: blue;background: yellow;position: absolute;left :

dongyang0 / 0评论 2019-11-03

回声消除中的自适应算法发展历程

　　传统的IIR和FIR滤波器在处理输入信号的过程中滤波器的参数固定，当环境发生变化时，滤波器无法实现原先设定的目标。自适应滤波器能够根据自身的状态和环境变化调整滤波器的权重。非线性自适应滤波器包括基于神经网络的自适应滤波器及Volterra滤波器。非线性

yishujixiaoxiao / 0评论 2019-11-01

如何设置HTML页面自适应宽度的table(表格)（一）

WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为

后乐 / 0评论 2014-12-09

java 企业 网站源码 模版 屏幕自适应 有前后台 springmvc SSM 生成静态化

4.springmvc +spring4.3.7+ mybaits3.3SSM 普通java web数据库：mysql

来斌 / 0评论 2019-10-08

java 企业 网站源码 模版 屏幕自适应 有前后台 springmvc SSM 生成静态化

4.springmvc +spring4.3.7+ mybaits3.3SSM 普通java web数据库：mysql

如狼 / 0评论 2019-09-27

css入门之布局

margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right；因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）。浮动和 绝对定位,可以让元素脱离文档流。

覆雪蓝枫 / 0评论 2015-05-17

PyQt5 实现字体大小自适应分辨率的方法

最近遇到一个现象，将做好的软件放在更高分辨率的电脑上运行，会导致字体显示不完全，出现被控件遮挡的情况。具体原因可以上网查询，在这里将记录下解决方法。这里记录两种方法，如果使用的Qt版本在5.6.0之后，可以支持High_DPI,应用设置该属性即可；如果不支

Eppley / 0评论 2019-06-18

jQuery使容器自适应浏览器窗口

resize 可传入data供函数fn处理。

xuewenke / 0评论 2012-04-21

手机端页面自适应解决方案—rem布局

写移动端页面都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex，也都能获得不错的效果，这里主要介绍的是本人在实践中用的最简单的布局方案——rem布局。先了解下REM是相对单位，是相对HTML根元素。rem的值目前有两种，一种是根

贱贱的梦想 / 0评论 2017-10-15

MySQL中的自适应哈希索引

众所周知，InnoDB使用的索引结构是B+树，但其实它还支持另一种索引：自适应哈希索引。哈希表是数组+链表的形式。通过哈希函数计算每个节点数据中键所对应的哈希桶位置，如果出现哈希冲突，就使用拉链法来解决。更多内容可以参考 百度百科-哈希表。从以上可以知道，

hck0ne / 0评论 2019-03-09

小程序自适应canvas

<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="qrcCanvas"/>. <input va

yixiaof / 0评论 2019-09-05

CSS网页布局入门教程8：三列浮动中间列宽度自适应

使用浮动定位方式，从一列到多列的固定宽度及自适应，基本上可以简单完成，包括三列的固定宽度。position　　用于设置对象的定位方式　　可用值：static/absolute/relative 对页面中的每一个对象而言，默认position属性都是stat

liusure0 / 0评论 2007-09-13

CSS网页布局入门教程5：二列宽度自适应

从二列固定宽度入手，开始尝试二列布局的情况下，左右栏宽度能够做到自适应，从一列自适应布局中我们知道，设定自适应主要通过宽度的百分比值设置，因此在二列宽度自适应的布局中也同样是对百分比宽度值的设计，继续上面的CSS代码，我们得新定义二列的宽度值：代码如下：。

不良牛 / 0评论 2007-09-13

CSS网页布局入门教程2：一列自适应宽度

自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度和高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。实际上div默认状态的占据整行的空间，便是宽度为100%的自适应布

前端小讴 / 0评论 2007-09-13

CSS控制背景图片自适应填充布局

背景图片的宽*高：400*200，要设置放背景的容器的宽高是图片宽高的等比例自适应填充才不变形。background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变。

wcssdu / 0评论 2018-09-21

java 企业门户网站 源码 自适应响应式 freemarker 静态引擎 html5 SSM

网站信息：维护网站基本信息，比如标题、描述、关键词、联系方式、地址等业务说明：网站首页文字业务介绍公司理念：网站首页展示公司的4个理念轮播图片：网站首页上面4个轮播图项目案例：网站首页项目案例合作伙伴：网站首页底部展示合作伙伴技术团队：网站底部展示技术团队

86384798 / 0评论 2019-09-02

win10怎么关闭或启用自适应亮度 Win10关闭或启用自适应亮度的方法

屏幕亮度自适应并不是啥新鲜事，对于比较新的笔记本电脑，在内置光线传感器的情况下，Windows 10 默认将该功能启用。自适应亮度是一个非常简单的功能，与手机类似，一些笔记本配合 Windows 10 也可以根据周围光线强度自动调整屏幕亮度。不过话虽然这么

Jiminull / 0评论 2016-08-15

win10通用应用《通知可视化》发布 设计Win10自适应动态磁贴

11月3日消息，微软发布了一款名为《Notifications Visualizer 》的Win10通用应用，这款应用的作用是帮助开发者设计自适应动态磁贴。与Visual Studio的XAML设计器一样，这款应用提供最终效果的即时预览，并且支持错误检查，

lwpkjio / 0评论 2015-11-02

[视频教程]Win10 10565预览版怎么设置窗口缩放自适应？

Win10的Snap窗口缩放功能是从Win8/Win8.1继承而来，现在的这项功能不仅适用于Windows应用，还适用于传统Win32应用。在最新的Windows10预览版10565中，这项功能又添了默认新技能：缩放自适应。微软在2015年初发布的Win1

80296630 / 0评论 2015-10-14

微软:win10开发者应善用自适应磁贴与交互式通知功能

Win10已正式发布，面向开发人员的Windows10开发工具也已经公布。而微软今天在其官方博客中通过一篇博文，鼓励开发者要善用Win10，包括PC桌面版和Mobile手机版中的自适应动态磁贴和交互式通知功能，引导用户使用最便捷的功能。自适应以及交互式通知

edwardhyl / 0评论 2015-08-18

html5中的自适应字体

在进行移动端页面的开发的时候，屏幕适配是很大的难题。在某些时候也会遇到字体的适配的问题。方案二：使用viewport来实现，css3提供了vw，vh，vim等与viewport相关的单位。案例如下：box2中的字体大小会根据屏幕的大小实时缩放。#box {

loverlucky / 0评论 2016-02-24

如何设置HTML页面自适应宽度的table(表格)（一）

WEB应用的页面，表格的表现形式是常常遇到的，在列数有限的前提下，如何将各列中的内容自适应到不同分辨率的屏幕，这应该是一个比较容易遇到的问题，下面就来谈一谈我对这类问题的解决与看法。将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为

后乐 / 0评论 2014-12-09