Swiper.js使用方法
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/swiper.min.css">
</head>
<body>
...
<script src="path/swiper.min.js"></script>
</body>
</html>
案例一：banner广告图片轮播
<div class="banner-container swiper-container">
<div class="swiper-wrapper">
<div class="banner-slide swiper-slide">
<a href="javascript:viod(0);"><img src="data:images/banner/bannerImg01.png"></a>
</div>
<div class="banner-slide swiper-slide">
<a href="javascript:viod(0);"><img src="data:images/banner/bannerImg02.png"></a>
</div>
<div class="banner-slide swiper-slide">
<a href="javascript:viod(0);"><img src="data:images/banner/bannerImg03.png"></a>
</div>
<div class="banner-slide swiper-slide">
<a href="javascript:viod(0);"><img src="data:images/banner/bannerImg04.png"></a>
</div>
</div>
<!--需要焦点按钮时加这段div-->
<div class="banner-pagination pagination">
<span></span>
</div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.banner-container',{
loop: true, //用来循环播放
pagination: '.banner-pagination', //显示焦点按钮
paginationClickable: '.banner-pagination', //焦点按钮可点击
});
setInterval("mySwiper.slideNext()", 2000); //加定时器的目的是：点击焦点按钮后，自动播放你所点击的那张图片的下一张
</script>
案例二：无缝滑动（不知道叫什么）
<div class="store-container swiper-container">
<div class="swiper-wrapper">
<!--swiper-slide为一本书-->
<div class="swiper-slide">
<dl>
<dt>
<img src="data:images/book/book01.png" />
</dt>
<dd>
<h6>我怀疑人们在密谋让我幸福</h6>
<span>张玮佳</span>
<p>当我们谈起生活时当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>
</dd>
</dl>
</div>
<!--swiper-slide为一本书-->
<div class="swiper-slide">
<dl>
<dt>
<img src="data:images/book/book02.png" />
</dt>
<dd>
<h6>世界上有趣的事太多</h6>
<span>张玮佳</span>
<p>当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>
</dd>
</dl>
</div>
<!--swiper-slide为一本书-->
<div class="swiper-slide">
<dl>
<dt>
<img src="data:images/book/book06.png" />
</dt>
<dd>
<h6>舍得，舍不得</h6>
<span>蒋勋</span>
<p>当我们谈起生活时，我们谈什么？事儿，谎言，习惯，欲望，面子，嫉妒。</p>
</dd>
</dl>
</div>
</div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 'auto',
spaceBetween: 24,
});
</script>
<div class="column-container swiper-container">
<div class="column-wrapper swiper-wrapper">
<div class="column-slide swiper-slide">
<a href="bookClassify.html">
<div class="column-bg">
<img src="data:images/column/columnImg01.png" />
</div>
<p>分类</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="newBook.html">
<div class="column-bg">
<img src="data:images/column/columnImg03.png" />
</div>
<p>新书</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="freeBook.html">
<div class="column-bg">
<img src="data:images/column/columnImg02.png" />
</div>
<p>免费</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="hotSale.html">
<div class="column-bg">
<img src="data:images/column/columnImg04.png" />
</div>
<p>热销</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="store.html">
<div class="column-bg">
<img src="data:images/column/columnImg05.png" />
</div>
<p>书店</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="bookClassify.html">
<div class="column-bg">
<img src="data:images/column/columnImg01.png" />
</div>
<p>分类</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="newBook.html">
<div class="column-bg">
<img src="data:images/column/columnImg03.png" />
</div>
<p>新书</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="freeBook.html">
<div class="column-bg">
<img src="data:images/column/columnImg02.png" />
</div>
<p>免费</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="hotSale.html">
<div class="column-bg">
<img src="data:images/column/columnImg04.png" />
</div>
<p>热销</p>
</a>
</div>
<div class="column-slide swiper-slide">
<a href="store.html">
<div class="column-bg">
<img src="data:images/column/columnImg05.png" />
</div>
<p>书店</p>
</a>
</div>
</div>
<!--需要焦点按钮时加这段div-->
<div class="column-pagination pagination">
<span></span>
</div>
</div>
<script type="text/javascript">
var mySwiper = new Swiper('.column-container',{
loop: true, //用来循环播放
pagination: '.column-pagination',
slidesPerView: 'auto',
paginationClickable: true,
slidesPerGroup: 5, //每次滑动5个
speed: 600 //滑动的速度
});
</script>
（本文原创，转载请注明出处！！）
Swiper.js使用方法的更多相关文章
- js文件中模块化导入swiper.js文件方法
es6导入: 在js文件顶端 import Swiper from "../../assets/javascripts/swiper.min"; import '../../ass ...
- Swiper教程 —— 使用方法
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
- 移动端开发（四）：swiper.js
swiper.js中文网:http://www.swiper.com.cn/ 文档结构 swiper.jquery.js 是需要引用jquery.js 或者 zepto.js 时,只需直接引用该 ...
- 使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
- 全屏使用swiper.js过程中遇到的坑
概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...
- swiper.js 多图片页面的懒加载lazyLoading
swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效.需 ...
- swiper.js的使用
点击api文档地址, (1)图片轮播banner <script src="js/jquery-2.1.4.min.js"></script> <sc ...
- swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题
使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...
- 兼容pc端和移动端的轮播图插件 swiper.js
swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...
随机推荐
- matplotlib 出图示例
如果你想要在Linxu中获得一个高效.自动化.高质量的科学画图的解决方案,应该考虑尝试下matplotlib库.Matplotlib是基于python的开源科学测绘包,基于python软件基金会许可证 ...
- 如何为ubuntu server 版本 安装图形界面
强烈建议使用命令行的交互方式,就算你在server上装了图形界面,但是在Linux上,大部分重要的操作还是要通过命令行的方式进行操作. 如何为ubuntu server 版本 安装图形界面 Ubunt ...
- c++中find函数的用法
find函数主要实现的是在容器内查找指定的元素,并且这个元素必须是基本数据类型的.查找成功返回一个指向指定元素的迭代器,即元素在容器中的下标,查找失败返回end迭代器. 头文件 #include &l ...
- pycharm中的快捷键和简单设置
PyCharm3.x默认快捷键 PyCharm Default Keymap 1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Sp ...
- Java架构师系统培训高并发分布式电商实战activemq，netty，nginx，redis dubbo shiro jvm虚拟机视频教程下载
15套java架构师.集群.高可用.高可扩 展.高性能.高并发.性能优化.Spring boot.Redis.ActiveMQ.Nginx.Mycat.Netty.Jvm大型分布 式项目实战视频教程 ...
- jmeter+ant+jenkins 搭建接口自动化测试
一.jmeter 我用的jmeter3.2 jmeter要运行,必须本地有java环境,所以需要配置jdk什么的,自行配置 二.ant 安装ant 第一步:下载ant http://ant.a ...
- python编码错误的解决办法 SyntaxError: Non-ASCII character '\xe5' in file
[提出问题]. 在编写Python时,当使用中文输出或注释时运行脚本,会提示错误信息: SyntaxError: Non-ASCII character '\xe5' in file ******* ...
- MyBatis框架——关系映射（一对多、多对多、多对一查询）
关系映射 一.映射(多)对一.(一)对一的关联关系 1).使用列的别名 ①.若不关联数据表,则可以得到关联对象的id属性 ②.若还希望得到关联对象的其它属性.则必须关联其它的数据表 1.创建表: 员工 ...
- python学习总结(面向对象进阶)
-------------------类属性和实例属性关系------------------- 1.类属性和实例属性关系 1.实例属性 实例对象独有的属性 2.类属性 ...
- photoshop软件应用手记
------------------------常用图片格式------------------------ 位图和矢量图 位图也叫点阵图,是由一个个的方形的像素点排列在一起拼接而成的,位图在放大时, ...