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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
服务器安全设置的几个注册表设置
Jul 28 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
js实现带箭头的进度流程
Mar 26 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
如何开始收听短波广播
2021/03/01 无线电
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
javascript 函数使用说明
2010/04/07 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python生成指定长度的随机数密码
2014/01/23 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python实现加密的方式总结
2020/01/19 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
大学生水文观测实习自我鉴定
2013/09/29 职场文书
离婚起诉状范本
2015/05/19 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
Python编程源码报错解决方法总结经验分享
2021/10/05 Python