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


Posted in Javascript onAugust 24, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
简单实现js轮播图效果
Jul 14 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
JavaScript lodash常见用法系列小结
Aug 24 #Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 #Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 #Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 #Javascript
总结Javascript中的隐式类型转换
Aug 24 #Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 #Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
php共享内存段示例分享
2014/01/20 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
vue使用showdown并实现代码区域高亮的示例代码
2019/10/17 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
python机器学习实战之树回归详解
2017/12/20 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python批量处理文件或文件夹
2020/07/28 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
六查六看自查材料
2014/02/17 职场文书
化工专业自荐书
2014/06/16 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL